I want to create a transition effect whenever I change the value of a property.
I tried doing the following
@Component({
selector: 'image-holder',
template: `
<div class="carousel-image">
<img src="{{ image }}" [@slideInRight]="slide" />
<span>{{ text }}</span>
</div>
`,
styleUrls: ['../greenscreen.scss'],
animations: [
trigger(
'slideInRight',
[
transition(
':enter', [
style({transform: 'translateX(100%)', opacity: 0}),
animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
]
),
transition(
':leave', [
style({transform: 'translateX(0)', 'opacity': 1}),
animate('500ms', style({transform: 'translateX(100%)',opacity: 0}))
]
)
])
]
})
export class ImageHolderComponent implements OnChanges {
@Input()
image: string;
@Input()
text: string;
public slide: boolean = true;
public ngOnChanges(changes: { [propKey: string]: SimpleChange }){
this.slide = !this.slide;
}
}
What I assumed was changing the property would trigger the component to start the animation effect again but that doesn't work as expected
this.slide = !this.slide would be true and false but when I look at your trigger you are saying [@slideInRight]="slide"
so basically, true or false.
but when I look in your animations I see :enter and :leave
what if instead you did 'true' and 'false' or try 1 and 0
then your animations would work when slideInRight is true or false and it would trigger the corresponding animation for true and false.
I've included a sample trigger that I have used in a application.
you need to setup your states for on and off / true and false or whatever variable values you want (string, etc).
then you have a transition that goes from... true to false, or false to true, or void to true, whatever your previous state and current state are, that transition will trigger.