web-dev-qa-db-fra.com

Angular 2/4 Animation sur la hauteur de div

Je vais essayer d'être bref. Pour une raison quelconque, mon animation semble fonctionner correctement sur l'attribut de style largeur/opacité, mais elle ne fonctionne pas sur l'attribut de hauteur ....

l'animation -

trigger('Grow', [
transition(':enter', [   // :enter is alias to 'void => *'
  style({height:'0'}),
  animate(500, style({height:'*'})) 
]),
transition(':leave', [   // :leave is alias to '* => void'
  animate(500, style({height:0})) 
])
])

Changer la 'hauteur' en largeur/opacité et l'animation fonctionne très bien ... quelqu'un sait où est le problème? n'a pu trouver de réponse relative nulle part.

un exemple de ce que j'essaie de réaliser est comme l'animation dans udemy, en cliquant sur une section, la hauteur div étend l'affichage de toutes les vidéos - https://www.udemy.com/meteor-react/

merci d'avoir lu .

Mise à jour - ne fonctionne toujours pas ...

peut-être que c'est quelque chose avec quoi j'anime?

<div class="animate" *ngIf="show" [@animate]> 
  <div  *ngFor="let video of section"><a>hi</a></div>
</div>

ce qui se passe est une fois que je clique, le div.animate s'affiche (par ngif) et se remplit de beaucoup de lignes qui disent 'salut'. Je veux que sur le spectacle div.animate, pour faire l'animation que j'ai spécifiée.

aidez-moi! ^^

angularanimation
13
Ben

Vous n'avez aucun état défini dans votre fonction trigger().

trigger crée un déclencheur d'animation nommé, contenant une liste d'entrées state() et transition() à évaluer lorsque l'expression liée au déclencheur change (l'expression étant [@slideInOut]="helpMenuOpen" dans l'exemple ci-dessous).

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenuOpen: string;

  constructor() { }

  ngOnInit() {
    this.helpMenuOpen = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out';
  }

}

Ensuite, utilisez-le dans votre vue comme ceci:

<div [@slideInOut]="helpMenuOpen">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>
22
Yeysides