angulaire de l'animation de fondu avec css3 transtions

Je suis en train de fade in/out une div sur le clic d'un lien à l'aide de ngAnimate et transitions css3. J'ai le texte suivant, mais il ne fonctionne pas. La div est montré/caché, mais n'a pas fondu en entrée ou en sortie. Où ai-je fait de mal:

.fade-in-out.ng-add {
  transition: 1s linear all;
  opacity: 0;
}

.fade-in-out.ng-add-active {
  opacity: 1;
}

.fade-in-out.ng-remove {
  transition: 1s linear all;
  opacity: 1;
}

.fade-in-out.ng-remove-active {
  opacity: 0;
}

La div est d'abord caché (showMe=false). Sur la page est un lien qui définit showMe de vrai.

<div ng-show="showMe" class="fade-in-out">          
    <div style="float: right; cursor: pointer;" ng-click="showMe=false">x</div>
    blablabla
</div>

Remarque que je suis en utilisant angulaire 1.2.26.

OriginalL'auteur user1491636 | 2014-11-19

  1. 17

    Classes adaptées à utiliser sont:

    .my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

    Dans votre cas, ce sera suffisant:

    .fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

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

    Noter que angular-animate.js doit être chargé et ngAnimate doit être ajouté comme une personne à charge du module.

    Juste pour comprendre, pourquoi serait-ng-show est pas la bonne classe à utiliser?
    Angulaire ajoute ng-hide lors de cacher quelque chose et de le supprimer lors de la démonstration de quelque chose. À l'aide de la ng-show ou ng-hide la directive n'a pas d'importance. Il n'y a pas de ng-show classe qui est ajouté par Angulaire.
    Puisque vous êtes bien versé dans ce domaine, vous pouvez prendre un coup d'oeil à un problème similaire: stackoverflow.com/questions/27140770/...
    Sûr, va prendre un coup d'oeil 🙂
    Je vous remercie pour votre note de pied de page, m'a aidé à éviter un géant des maux de tête!

    OriginalL'auteur tasseKATT