Animation avec l'état initial/après

Question

J'essaie de trier comment faire une animation angulaire avec un état initial. Je suis en train de développer un glisser vers le haut/bas animation, à ce jour avec:

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      // display: 'block', 
      height: '*' 
     })), 
     transition('* <=> *', [ 
      style({ 
       display: 'block' 
      }), 
      animate('.5s ease') 
     ]) 
    ] 
) 

Dans la version jQuery, l'élément en question a display: none à ce sujet, et je remarque qui glisse jQuery ouverte, et je vois display: block sur l'élément final. Quand j'ai display: 'block' commenté comme ci-dessus, il fonctionne comme prévu, cependant, quand la page se charge, il commence avec les éléments allant de pleine hauteur à aucune (ce qui est logique je suppose?), Ce qui est bizarre pour le utilisateur.

J'essaie de comprendre comment je peux le configurer ainsi quand fermé, d'abord il va à display: block, exécute l'animation de taille, et tient le bloc. Dans l'autre sens, je veux bloquer jusqu'à ce que ce soit fait, en ajoutant un display: none.

J'ai essayé d'ajouter une classe sans affichage, mais comme les animations n'ajoutent pas de classe avant/après, cela n'a pas fonctionné comme prévu. Je suppose que cela devrait être une combinaison des classes JS et CSS d'animation angulaire, mais je n'arrive pas à comprendre le modèle. Tout conseil sur la façon d'aborder ce serait génial.

Answer 1

Je pense que vous avez besoin de deux transitions pour obtenir ce que vous voulez.

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      height: '*' 
     })), 
     transition('closed => open', [style({ display: none }), animate('.5s ease')]), 
     transition('open => closed', [style({ display: 'block' }), animate('.5s ease')]) 
    ] 
)