我正在尝试排序如何使用初始状态执行角度动画。我正在尝试开发一个上下滑动动画,到目前为止:
trigger(
'slideHeight',
[
state('closed', style({
display: 'none',
height: 0
})),
state('open', style({
// display: 'block',
height: '*'
})),
transition('* <=> *', [
style({
display: 'block'
}),
animate('.5s ease')
])
]
)
在jQuery版本中,有问题的元素上有display: none
,我注意到jQuery幻灯片打开,然后我在最后一个元素上看到display: block
。
当我有display: 'block'
如上所述注释时,它按预期工作,但是,当页面加载时,它从元素从全高度开始到无(这是有意义的,我猜?),这对用户来说很奇怪。
我试图找出如何设置它所以当关闭时,首先它去display: block
,运行高度动画,并保持阻止。在另一个方向,我想阻止它,直到它完成,添加一个display: none
。
我已经尝试添加一个display none的类,但由于动画不会在之前/之后添加一个类,所以它没有按预期工作。我怀疑这应该是Angular动画JS和CSS类的组合,但我无法弄清楚这种模式。如何解决这个问题的任何建议都会很棒。
我认为你需要两个过渡来获得你想要的东西。
trigger(
'slideHeight',
[
state('closed', style({
display: 'none',
height: 0
})),
state('open', style({
height: '*'
})),
transition('closed => open', [style({ display: none }), animate('.5s ease')]),
transition('open => closed', [style({ display: 'block' }), animate('.5s ease')])
]
)
不确定这是否正是您想要的,但您可以使用*
来描述一个“默认”状态。我看到你已经用高度做了这个,但你也可以将状态定义为*
。
我希望能够显示和隐藏箭头。所以它有两个逻辑状态'in'和'out'。这很容易在两者之间切换。但是如果初始状态应该是'in'那么我希望它能够淡入,但是除非你定义一个out => in
状态,否则不会有* => in
动画甚至*
的“起点”。
animations: [
trigger('showArrow',
[
state('*', style({opacity: 0})),
state('in', style({opacity: 1})),
state('out', style({opacity: 0})),
transition('* => in', [
animate(15000)
]),
transition('* => out', [
animate(200)
])
])
],
所以我的图标定义如下(注意这是一个自定义svg):
<mat-icon [@showArrow]="(showArrow$ | async) ? 'in' : 'out'"
svgIcon="right-arrow"></mat-icon>
即使初始状态被硬编码为true
(因此没有状态变化),它仍然会淡入,因为我已经定义了一个*
起始状态(0不透明度)。
this.showArrow$ = new BehaviorSubject(true);