我希望在活动路由链接改变时能够对组件进行淡入淡出的动画。我该如何编写动画代码,以便当路由器发生更改时,一个组件淡出,然后另一个组件淡入?
我一直试用的代码如下所示。
@Component({
selector: 'app-component',
templateUrl: './component.component.html',
animations: [trigger(
'openClose',
[
transition(":enter", [
style({ opacity: 0 }),
animate('2000ms', style({ opacity: 1 }))
]),
transition(":leave", [
animate('2000ms', style({ opacity: 0 }))
])
])]
})
但是我认为我的理解有误,因为我试图在至少两个组件中使用那段代码,但它们都没有淡入或淡出。
这个函数能实现这个效果吗?还是我用了错误的方法来解决问题?