[英]angular 4 simultaneous animations
我正在尝试将我的webapp从AngularJS移植到Angular 4,我遇到了一些动画问题。 对于“Google图片”类型的视图,我有两个动画需要在单击项目时同时进行; 一个div需要其margin-bottom增加,并且该div的一个孩子需要逐渐出现,使用ngIf和它的高度转换。 这两个动画分开工作,但如果我将两个动画放在各自的元素上,那么只有第一个动画有效。
我做了一个最小的傻瓜来证明我的意思: https ://plnkr.co/edit/27EFz3h16icnh3qDzQbY?p =preview
const animationTiming = '1s ease';
@Component({
selector: 'my-app',
animations: [
trigger('expand',
[
state('expanded', style({"margin-bottom": '392px'})),
state('collapsed', style({"margin-bottom": '0'})),
transition('* => *', animate(animationTiming))
]),
trigger('visibility',
[
transition(
':enter', [
style({'height': '0'}),
animate(animationTiming, style({'height': '*'}))
]
),
transition(
':leave', [
style({'height': '*'}),
animate(animationTiming, style({'height': '0'}))
]
)
])
]
template: `
<button (click)="toggle()">click</button><br/>
<div class="container" [@expand]="expanded?'expanded':'collapsed'">
something here
<div class="detail" [@visibility] *ngIf="expanded">something else in here</div>
</div>
<div class="container">something else</div>
`,
})
export class App {
expanded: boolean = false;
toggle() {
this.expanded = !this.expanded;
}
}
如果单击该按钮,应该发生的事情是新内容在“此处的内容”和“其他内容”之间展开。 实际发生的是两个帧按预期相互远离,但新内容立即弹出。 如果我从第一个div中删除[@expand]动画,新内容会逐渐变得无用,但显然两个容器div不会为它腾出空间。
有没有让这些动画同时工作的技巧?
我不确定为什么会出现此错误,但如果您更改模板,它会起作用:
<button (click)="toggle()">click</button><br/>
<div class="container" [@expand]="expanded?'expanded':'collapsed'">
something here</div>
<div class="detail" [@visibility] *ngIf="expanded">something else in here</div>
<div class="container">something else</div>
当第二个<div>
不是第一个<div>
的子div时,两个动画的行为似乎更好。
你可以改变css代码,使div保持在其他代码之间(通过删除position: absolute
):
.detail {
height: 360px;
display: block;
border: 1px solid black;
left: 0px;
right: 0px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.