我想用Angular2动画显示和隐藏我的模态组件.目前这是我的代码：
animations: [
trigger('modalState',[
state('true',style({
display: 'block',opacity: '1'
})),state('false',style({
display: 'none',opacity: '0'
})),transition('* => *',animate('200ms ease'))
])
]
问题：此时显示块在200ms后设置.所以你看不到动画的不透明度.应在事件发生后直接设置显示.
这该怎么做？
解决方法
您可以为同一元素使用2个不同的触发器.
第一个将处理’不透明度’,第二个将处理’display’属性.
因此,请使用持续时间和延迟时间来获得所需内容.
animations: [
trigger('modalStateOpacity',style({ opacity: '1' })),style({ opacity: '0' })),transition('0 <=> 1',animate('200ms ease'))
]),trigger('modalStateDisplay',style({ display: 'block' })),style({ display: 'none' })),transition('0 => 1',animate('0ms ease')),transition('1 => 0',animate('0ms 200ms ease'))
])
]
