angular – 如何在加载/卸载时在页面上实现淡入/淡出效果?
发布时间:2020-12-17 06:59:07 所属栏目:安全 来源:网络整理
导读:我想我已经连接了基本的动画部分,我只需要知道要处理的事件.理想情况下,我想要一个我可以在导航级别使用的解决方案,所以我可以包装我的所有组件,但一个简单的页面加载示例就足够了,非常感激. 我在SO上发现了其他一些相关问题,但它们似乎没有回答我的具体问题
我想我已经连接了基本的动画部分,我只需要知道要处理的事件.理想情况下,我想要一个我可以在导航级别使用的解决方案,所以我可以包装我的所有组件,但一个简单的页面加载示例就足够了,非常感激.
我在SO上发现了其他一些相关问题,但它们似乎没有回答我的具体问题或过时: Angular 2 “slide in animation” of a routed component 这是我到目前为止: html文件 <article @heroState="componentState"> <p>article element should fade in/out</p> </article> 零件 @Component({ selector: 'blog-about',templateUrl: './app/about/about.html',animations: [ trigger('heroState',[ state('active',style({ backgroundColor: 'blue',transform: 'scale(1)' })),state('inactive',style({ backgroundColor: 'green',transform: 'scale(1.1)' })),transition('active => inactive',animate('1000ms ease-in')),transition('inactive => active',animate('1000ms ease-out')) ]) ] }) export class About implements OnInit,OnDestroy { public componentState: string; public Title: string constructor() { this.Title = "this is about"; } ngOnInit() { this.componentState = 'inactive'; } ngOnDestroy() { } } 解决方法
你确定你没有参考答案:
https://stackoverflow.com/a/40077108/6678754 与plunker: https://embed.plnkr.co/Vral6cwlaQz27MUQNkVg/? 这应该适合你,再次检查. 您还有另一种选择:在导入about组件的父级中使用动画,如下所示: <blog-about [@heroState]="activeRouteVar"></blog-about> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |