详解Angular路由动画及高阶动画函数

一、路由动画

路由动画需要在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路由动画及高阶动画函数的资料请关注其它相关文章！