web-dev-qa-db-fra.com

ng-Animate ne fonctionne pas pour un paramètre Masquer et afficher

J'utilise AngularJS version 1.2.11. J'ai défini une barre d'outils pour glisser vers l'intérieur et vers l'extérieur avec une transition en utilisant ng-Animate (afficher et masquer).

Voici le HTML:

 <div>
  <div class="full-height">
    <menu-main class="full-height pull-left"></menu-main>
    <menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
    </menu-sub>
  </div>
</div>

Et voici le CSS pour le même élément de barre d'outils

.animate.fade-hide, .animate..fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active 
{
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-show {
    position: fixed;
    top: 100px;
        opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
    position: fixed;
    top: 100px;
        opacity: 1;
}

L'animation ne fonctionne pas et je ne sais pas si je fais cela correctement.

angularjsng-animateng-showng-hide
22
Sandeep

L'attribut ng-animate est obsolète en 1.2 et n'est plus utilisé. Au lieu de cela, les animations sont désormais basées sur les classes.

Assurez-vous également que vous faites référence à angular-animate.js et en ajoutant ngAnimate comme module dépendant:

var app = angular.module('myApp', ['ngAnimate']);

Vous nommez ensuite vos animations, par exemple "fadein" et "fadeout", et vous les décorez avec des classes supplémentaires en suivant une convention de dénomination spéciale qui peut être trouvée dans le Angular documentation .

Une autre bonne source sur le sujet est Year of moo .

Exemple de Fadein:

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  opacity: 1; /* Default value but added for clarity */
}

/* Initial state when showing */
.fadein.ng-hide-remove {
  opacity: 0;
  display: block !important;
}

/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

Démo : http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview

51
tasseKATT