Quelque chose comme Bootstrap pliable angulaire

Je suis en train de construire une petite app et je suis en utilisant AngularJS. À l'intérieur de l'application, j'ai besoin d'un élément pliable et en utilisant Twitter Bootstrap serait aussi facile que de l'ajout de la bibliothèque de tags sur mon élément cible et le déclencheur.

Mais je vais essayer de ne pas charger d'autres bibliothèques externes comme bootstrap ou n'importe quel autre, donc j'essayais d'atteindre le même comportement Angulaire :

$scope.collapse = function(target) {

        var that = angular.element(document).find(target),

            transitioned = {
                'WebkitTransition' : 'webkitTransitionEnd',
                'MozTransition'    : 'transitionend',
                'OTransition'      : 'oTransitionEnd otransitionend',
                'msTransition'     : 'MSTransitionEnd',
                'transition'       : 'transitionend'
            },

            _transitioned = transitioned[ Modernizr.prefixed('transition') ],

            height = that.outerHeight(true);

        if (angular.element(that).hasClass("in")) {
            that.height(0);
        } else {
            that.height(height);
        };

        that.on(_transitioned, function() {
            that.toggleClass("in");
        });
    };

Comme vous pouvez le voir je suis en train de faire la transition de la hauteur ( comme l'élément a une transition de la hauteur ) et à la fin, il suffit d'ajouter la classe in. Mais qui ne fonctionne pas très bien, parce que si je suis à l'écoute sur la transition de la fin il va déclencher sur la toute fin de transition à l'intérieur de cet élément.

J'aurais besoin d'un peu d'aide avec cela, comment puis-je réécrire le bootstrap pliable juste angulaire ? Je n'ai pas besoin que les événements de bootstrap a comme sur shown, hidden ou show, hide, j'ai juste besoin de déclencher un simple effondrement de l'élément de transition et de garder mes éléments de la hauteur dynamique ( je ne veux pas de hauteur fixe, sinon, je voudrais juste utiliser les CSS pour atteindre l'effondrement ). J'ai juste besoin d'être mis en évidence dans le bon sens 🙂

InformationsquelleAutor Roland | 2013-02-15

7

Semble que vous voulez juste s'effondrer quelque chose avec des transitions CSS3?

Bien, vous pouvez le faire, mais le contrôleur est le mauvais endroit pour faire ça. Vous devriez le faire avec les directives ou coutumier de la directive. Heureusement, vous pouvez le faire avec l'angle de native des directives telles que la ng-classe.

HTML:
```
<button ng-click="open = !open">Toggle</button>    
<div ng-class="{ showMe: open }" class="collapsable">
  <h3>This should collapse</h3>
</div>
```
Et, plus important encore, votre CSS:
```
  .collapsable {
    display: inline-block;
    overflow: hidden;
    height: 0;
    transition: height 1s;
    -webkit-transition: height 1s;        
    -moz-transition: height 1s;        
    -o-transition: height 1s;         
  }
  .collapsable.showMe {
    height: 100px;
  }
```
Et voici une plunker de travail.

Important de noter, CSS3 transitions ne fonctionnera pas dans tous les navigateurs. En particulier dans IE. En fin de compte, je pense que tu ferais sans doute mieux d'utiliser un plugin que quelqu'un d'autre est déjà fait, et puis de l'accroître dans une coutume directive qui ont regardé une valeur booléenne.

J'espère que ça aide.

MODIFIER

height: auto ne fonctionne pas avec les Transitions CSS (au moins à compter du moment de ce post). Donc, c'est pourquoi vous allez vraiment vous voulez utiliser un autre plugin, plutôt que de réinventer la roue. Même si c'est juste de JQuery animate() de la méthode. Le pseudo-code pour rouler vos propres directive serait quelque chose comme ceci: (en supposant que vous êtes à l'aide de JQuery)
```
app.directive('collapseWhen', function () {
   return function(scope, elem, attr) {
     scope.$watch(attr.collapseWhen, function(val) {
        var clone = elem.clone().appendTo('body');
        var h = clone.height();
        clone.remove();
        scope.animate({ height: (val ? h : 0) + 'px' }, 1000);
     }
   }
});
```
et puis vous auriez l'utiliser comme:
```
<button ng-click="foo = !foo">Toggle</button>
<div collapse-when="foo">
```
Encore une fois, le ci-dessus est pseudo-code, je n'ai aucune idée si ça fonctionne ou pas, c'est juste pour vous donner une idée à suivre si vous vraiment souhaitez annuler votre propre.
- Comme je l'ai dit dans ma description, collapsable.showMe { height: 100px; }, la hauteur doit être auto afin que je puisse avoir mon contenu de la hauteur dynamique, parce que plusieurs éléments pourraient être ajoutés par la suite ...
- C'est pourquoi vous aurez envie d'utiliser un autre plugin. Ce que vous devez faire est de vérifier la hauteur de l'intérieur de votre contenu avec javascript, et puis définissez la hauteur avec les CSS à la volée. auto ne fonctionne pas avec les transitions CSS dans n'importe quel navigateur que je connais.
- N'était-ce pas ce que je viens de dire dans la description ? Que le fait d'avoir de l'auto de hauteur ne fonctionne pas dans ce cas quand je veux les transitions css. C'est pourquoi j'ai essayé de régler la hauteur, puis ajouter le in classe, qui a height : auto. Juste que l'aide à la transition de fin ne fonctionne pas. Ni l'obtention de la hauteur de l'élément de travail, depuis la classe collapse du jeu à 0px. C'est pourquoi je pose la question ici si il y a un moyen de le faire sans les événements qui bootstrap a et ont seulement l'effondrement.
- Pas de raison de s'snippy. Je vais essayer de vous aider.
- Vous aurez besoin de prendre une copie de l'élément et de mesurer la hauteur à définir avec les CSS. J'ai ajouté un peu de code de démonstration pour vous donner une idée.
- Je ne suis pas 🙂 je ne fais jamais 😛 j'essayais juste de me faire comprendre, je ne suis pas douée pour expliquer 🙂
InformationsquelleAutor Ben Lesh

Si je comprends bien les questions, ma solution est d'utiliser angulaire $animateCss. Ici il y a de la doc et des exemples https://docs.angularjs.org/api/ngAnimate/service/$animateCss

Avec $animateCss service, vous pouvez créer votre propre animation à l'aide de ngAnimate. Ceci est un exemple de l'angle de module. La démo est dans le lien ci-dessous

var AppModule = angular.module('myApp', ['ngAnimate'])
  .controller('collapseCtrl', ['$scope', function($scope) {
    $scope.btn1 = $scope.btn2 = $scope.btn3 = false;
  }]).animation('.my-collapse', ['$animateCss', function($animateCss) {
    return {
      enter: function(element, doneFn) {
        var height = element[0].offsetHeight;
        return $animateCss(element, {
          from: {
            height: '0px',
            overflow: 'hidden'
          },
          to: {
            height: height + 'px'
          },
          cleanupStyles: true,
          duration: 0.3 //one second
        });
      },
      leave: function(element, doneFn) {
        var height = element[0].offsetHeight;
        return $animateCss(element, {
          to: {
            height: '0px',
            overflow: 'hidden'
          },
          from: {
            height: height + 'px'
          },
          cleanupStyles: true,
          duration: 0.3 //one second
        });
      }
    };
  }]);

https://plnkr.co/edit/DjU1A2vmiBB1dYXjkiN1

Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements. - Revue
J'ai édité la réponse avec un exemple.

InformationsquelleAutor user3083618

1

Roland, jetez un oeil à Bootstrap Projet angulaires-ui.
- Je sais déjà ce sujet 😉 L'accordéon ne convient pas à mes besoins, je dois être en mesure de déclencher l'effondrement de n'importe où dans le balisage, auquel cas le projet "bootstrap" a une directive qui couvre, mais vous ne pouvez pas avoir votre détente à l'extérieur de la directive cadre
InformationsquelleAutor Maxim Grach

Vous devez vous connecter pour publier un commentaire.