发现课程中动画Bug：ProjectListComponent 的 :leave 并没有执行（直接消失了）

来源：3-4 路由动画及高阶动画函数

小蜗牛不回头

2017-10-04

一开始我以为我哪里写错了（因为我把过渡时间写得非常长发现的），后面仔细观察老师切换路由时，从"/projects" 到 “/taskList" 切换时，项目列表其实也是直接消失的，而不是慢慢从左到右消失，不信把时间调长就能看出来。

但是反过来切换就不会？？

写回答

1回答

接灰的电子产品

2017-10-07

其实不是bug，是动画安排的时间问题，是淡出效果还没来得及出来就横向移动走了，你可以试着调整时间看一下

export const slideToRight = trigger('routeAnim', [
state('void', style({display: 'flex', overflow: 'auto'})),
state('*', style({display: 'flex', overflow: 'auto'})),
transition(':enter', [
style({transform: 'translateX(-100%)', opacity: 0}),
group([
animate('.5s ease-in-out', style({transform: 'translateX(0)'})),
animate('.3s ease-in', style({opacity: 1})),
])
]),
transition(':leave', [
style({transform: 'translateX(0)', opacity: 1}),
group([
animate('2s ease-in-out', style({transform: 'translateX(100%)'})),
animate('3s ease-in', style({opacity: 0})),
])
]),
]);

Angular打造企业级协作平台，让你在Angular领域中出类拔萃

全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用

998 学习 · 536 问题

查看课程

相似问题

老师，我在添加paroject的时候:enter会被触发，但是在删除project是:leave不会被出发。

回答 3

实现ProjectService之后为什么卡片动画失效了

回答 1

changeDetection章节里鼠标移动到project时候，自动创建了新的project。

回答 2

这个是angular2?现在都是angular8了，有一些都不一样的了？这个课件可以更新吗变成angular8的？

回答 1

怎么理解[@listAnim]="projects.length

回答 1

打开慕课网App查看更多内容