Problème d'animation coulissante angulaire ngShow sidebar

Question

J'essaie d'animer une barre latérale à bascule pour qu'elle s'ouvre et se ferme, et je n'arrive pas à faire fonctionner les animations. Je pense que je suis confus avec la façon dont je suis censé appliquer des animations aux éléments ngShow/ngHide.

J'ai inclus un exemple ici: https://jsfiddle.net/chiggerchug/m6ahk463/62/

EDIT: Lien mis à jour, le menu met en pause maintenant avant la fermeture, mais pas d'animation est appliquée.

Voici un exemple de mon css qui est appliquée à l'élément qui est basculée:

.animate-show-hide.ng-hide { 
    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
    } 

    .animate-show-hide.ng-hide-remove { 
    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
    } 

Toute aide à ce sujet serait grandement apprécié, Merci.

Answer 1

Le code ci-dessus fonctionne. Vous avez juste besoin de changer votre classe d'animation

@keyframes myChange { 
    from { 
     width: 250px; 
    } to { 
     width: 0; 
    } 
} 

.animate-show-hide.ng-hide { 
    animation: 0.5s myChange; 
} 

Fiddle: https://jsfiddle.net/m6ahk463/64/

Mise à jour Fiddle: https://jsfiddle.net/m6ahk463/66/