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
In Angular, transition states can be defined explicitly through the state() function, or using the predefined * (wildcard) and void states.
The State Change Expression instructs Angular when to run the transition's animations, it can either be. a string with a specific syntax. or a function that compares the previous and current state (value of the expression bound to the element's trigger) and returns true if the transition should occur or false otherwise.
Transitions between two states take place so that we can build simple animations between two states driven by a model attribute. Transition basically means navigating from the current state to a new state. In angular, the transition is an animation-specific function which is used in angular's animation DSL language.
You can use *ngFor for those use cases, even if it's just a single object.
@Component({
selector: 'image-holder',
template: `
<div class="carousel-image">
<img [src]="image" *ngFor="let image of [image]" [@slideInRight]/>
<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 {
@Input()
image: string;
@Input()
text: string;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With