详解Angular路由动画及高阶动画函数
- 作者: duang-duang_duang
- 来源: 51数据库
- 2021-06-24
一、路由动画
路由动画需要在host元数据中指定触发器。动画注意不要过多，否则适得其反。
内容优先，引导用户去注意到某个内容。动画只是辅助手段。
在router.animate.ts中定义一个进场动画，一个离场动画。
因为进场动画和离场动画用的特别频繁，有一个别名叫:enter和:leave。
在project-list中使用路由动画。
在task-home中使用路由动画。
定义路由
注意：一定要用hostbinding形式。
二、group
用于同时进行一组动画变换
group([animate(...),animate(...)...])接收一个数组，数组里写多个动画。
三、query & stagger
query用于父节点寻找子节点，把动画应用到选中元素。非常强大。
stagger指定有多个满足query的元素，每个的动画之间有间隔。
做一个示例：新建的时候同时新建2个项目，两个新建出的项目的动画依次产生，第一个完成后才开始第二个。
建立list.animate.ts
进场动画，先隐藏起来，通过stagger间隔1000s做一个1s的动画。
在project_list中使用
应用query动画一般都是跟*ngfor在一起的，需要外面套一层div。
修改对应的css
修改一下component
stagger使得在多个元素时候，动画交错开，而不是一起。
以上就是详解angular路由动画及高阶动画函数的详细内容，更多关于angular路由动画及高阶动画函数的资料请关注其它相关文章！
推荐阅读
