我已经使用6个角度动画实现了一个动画,动画的类型为上/下滑动以及衰落效果,但我担心的是它的行为不符合预期。 / p>
这是相同的sandBox。 https://codesandbox.io/s/angular-vmw5t
这是目前的样子。
我在这里担心的是:enter
动画是否正常工作,因为一旦开始动画,元素就会从底部出现,但是一旦我点击顶部的跨图标 -右键,然后元素稍微上升,然后在底部中淡出。
预期的行为应为,一旦单击 cross-icon ,其当前位置的按钮应移至底部并逐渐消失,我想消除单击按钮后这种轻微的向上移动cross-icon
,它应该从当前位置淡入底部。
摘要:
用户单击cross-icon
时,淡入/滑出动画无法正常工作。*按钮先稍微向上然后下降然后淡出,它应该从当前位置下降。
答案 0 :(得分:1)
动画
animations: [
trigger('flyInOut', [
state('in', style({ opacity:1,transform: 'translateY(0)' })),
transition('void => *', [
style({ opacity:0,transform: 'translateY(100%)' }),
animate(200)
]),
transition('* => void', [
animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
])
])
]
必须以.html之类的格式进行工作
<button (click)="toogle=!toogle">click</button>
<div [@flyInOut] *ngIf="toogle" >
hello word <button (click)="toogle=false">x</button>
</div>
请参见stackblitz