Reputation: 51
learn from udemy course , i built a "to do list" , when the app loads all the "missions" are really animate but when i add or remove a new element to the dom the animation not work , why ?
here is the html page sample page that i build , form to add mission and output to right side of the page home.component.html:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mainTitle">My Golads List!</h1>
</div>
</div>
<div class="row">
<div class="">
<h2 class="sub-title">
My next goal is:
</h2>
<form action="">
<input type="text" name="goal" placeholder="Learn social skils" [(ngModel)]="goalText" /><br />
<input type="submit" [value]="btnText" (click)="addItem()" />
</form>
</div>
<div class="" [@goals]="goals.lenght">
<h2 class="sub-title">Goal Lists: ({{itemCount}})</h2>
<ul class="list" >
<li *ngFor="let goal of goals; let i = index" (click)="removeItem(i)">{{goal}}</li>
</ul>
</div>
</div>
here is the angular code , learn in from the course home.component.ts:
import { Component, OnInit } from '@angular/core';
import { trigger , style , transition , animate , keyframes , query , stagger } from "@angular/animations";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
animations: [
trigger('goals' , [
transition('* => *' , [
query(':enter' , style({opacity:0}) , {optional:true}),
query(':enter' , stagger('300ms' , [
animate('.6s ease-in' , keyframes([
style({opacity:0 , transform:'translateY(-75%)' , offset:0}),
style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
style({opacity:1 , transform:'translateY(0)' , offset:1}),
]))
]) , {optional:true}),
query(':leave' , stagger('300ms' , [
animate('.6s ease-in' , keyframes([
style({opacity:1 , transform:'translateY(0)' , offset:0}),
style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
style({opacity:0 , transform:'translateY(-75%)' , offset:1}),
]))
]) , {optional:true})
])
])
]
})
export class HomeComponent implements OnInit {
itemCount: number;
btnText: string = "Add an item";
goalText: string = "my first life goal";
goals = ["my first goal", "i wnat be the world" , "buy new car"];
constructor() { }
ngOnInit() {
this.itemCount = this.goals.length;
}
addItem(){
this.goals.push(this.goalText);
this.goalText = "";
this.itemCount = this.goals.length;
}
removeItem(i){
this.goals.splice(i ,1);
}
}
Upvotes: 4
Views: 1079
Reputation: 4798
Use like this:
transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void
OR:
transition('* => void', [
style({height: '*'}),
animate('.6s ease-out' , keyframes([
style({opacity:0 , transform:'translateY(-75%)' , offset:0}),
style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
style({opacity:1 , transform:'translateY(0)' , offset:1}),
]))
]),
transition('void => *', [
style({height: '*'}),
animate('.6s ease-out' , keyframes([
style({opacity:1 , transform:'translateY(0)' , offset:0}),
style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
style({opacity:0 , transform:'translateY(-75%)' , offset:1}),
]))
]),
Upvotes: 1