问题
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
回答1:
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;
}
回答2:
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.
trigger('work', [
state('*', style({transform: 'translateX(0)', opacity: 1})),
state('true', style({'border-right': '50px solid #72BF44', opacity: 1})),
state('false', style({'border-right': '20px solid #72BF44', opacity: 1})),
transition('1 => 0', animate('.125s .1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')),
transition('0 => 1', animate('.125s 0s cubic-bezier(0.29, 0.06, 0.43, 0.92)')),
transition('void => *', [
style({transform: 'translateX(-100%)', opacity: 0}),
animate('1s 1.1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')
])
])
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.
来源:https://stackoverflow.com/questions/43967392/creating-a-transition-when-changing-properties-in-angular-2-4