Angular - 列表元素的交错动画
Angular - stagger animation for list elements
我有一个这样定义的转换:
transition('show-content => hide-content', [
query('.project-view-item', [
style({
opacity: 1,
transform: 'translateX(0px)'
}),
stagger('0.3s', [
animate(
'0.2s',
keyframes([
style({
opacity: 0,
transform: 'translateX(-40px)',
offset: 1
})
])
)
])
])
])
一切正常。这些项目向左移动并淡出。问题是,在所有项目都隐藏之后,样式会重置,并且它们会立即再次可见。就像我需要将 css3 属性 称为 animation-fill-mode: forwards
.
如何在 angular 中做到这一点?如何保留动画的最后状态?
动画开始和动画完成将在此处提供帮助:
HTML
<div class="project-view" (@content.start)="start($event)"
(@content.done)="done($event)" [@content]="isShowContent ? 'show-content': 'hide-content'">
<div class="myClass">
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
</div>
</div>
打字稿:
hideContent(callback?) {
console.log("HIDE CONTENT CALLED");
this.isShowContent = false;
this.callback = callback;
}
showContent(callback?) {
console.log("SHOW CONTENT CALLED");
this.isShowContent = true;
this.callback = callback;
}
done(event) {
if (this.isShowContent) {
document.querySelector('.myClass').setAttribute('style',
"opacity:1;transform: 'translateX(0)')");
}
else {
document.querySelector('.myClass').setAttribute('style',
"opacity:0;transform: 'translateX(-40px)')");
}
}
start(event) {
document.querySelector('.myClass').setAttribute('style',
"opacity:1; transform: 'translateX(-40px)')");
}
还可以向您的动画添加 state
声明,这样您就不需要用动画逻辑污染您的模板和 ts 文件:
transition('show-content => hide-content', [
....
]
state('hide-content', style({opacity: 0})),
我有一个这样定义的转换:
transition('show-content => hide-content', [
query('.project-view-item', [
style({
opacity: 1,
transform: 'translateX(0px)'
}),
stagger('0.3s', [
animate(
'0.2s',
keyframes([
style({
opacity: 0,
transform: 'translateX(-40px)',
offset: 1
})
])
)
])
])
])
一切正常。这些项目向左移动并淡出。问题是,在所有项目都隐藏之后,样式会重置,并且它们会立即再次可见。就像我需要将 css3 属性 称为 animation-fill-mode: forwards
.
如何在 angular 中做到这一点?如何保留动画的最后状态?
动画开始和动画完成将在此处提供帮助:
HTML
<div class="project-view" (@content.start)="start($event)"
(@content.done)="done($event)" [@content]="isShowContent ? 'show-content': 'hide-content'">
<div class="myClass">
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
<div class="project-view-item">Hello</div>
<div class="project-view-item">Hi</div>
</div>
</div>
打字稿:
hideContent(callback?) {
console.log("HIDE CONTENT CALLED");
this.isShowContent = false;
this.callback = callback;
}
showContent(callback?) {
console.log("SHOW CONTENT CALLED");
this.isShowContent = true;
this.callback = callback;
}
done(event) {
if (this.isShowContent) {
document.querySelector('.myClass').setAttribute('style',
"opacity:1;transform: 'translateX(0)')");
}
else {
document.querySelector('.myClass').setAttribute('style',
"opacity:0;transform: 'translateX(-40px)')");
}
}
start(event) {
document.querySelector('.myClass').setAttribute('style',
"opacity:1; transform: 'translateX(-40px)')");
}
还可以向您的动画添加 state
声明,这样您就不需要用动画逻辑污染您的模板和 ts 文件:
transition('show-content => hide-content', [
....
]
state('hide-content', style({opacity: 0})),