16.5 - 创建可重用动画

将动画的定义放置在单独的文件中，方便多组件调用

import { animate, keyframes, style, transition, trigger } from "@angular/animations"
export const slide = trigger("slide", [
    transition(":enter", [
        style({ opacity: 0, transform: "translateY(40px)" }),
        animate(250)
    ]),
    transition(":leave", [
        animate(
            600,
            keyframes([
                style({ offset: 0.3, transform: "translateX(-80px)" }),
                style({ offset: 1, transform: "translateX(100%)" })
            ])
        )
    ])
])

import { slide } from "./animations"
@Component({
    animations: [slide]
})

抽取具体的动画定义，方便多动画调用

import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"
export const slideInUp = animation([
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
])
export const slideOutLeft = animation([
    animate(
        600,
        keyframes([
            style({ offset: 0.3, transform: "translateX(-80px)" }),
            style({ offset: 1, transform: "translateX(100%)" })
        ])
    )
])
export const slide = trigger("slide", [
    transition(":enter", useAnimation(slideInUp)),
    transition(":leave", useAnimation(slideOutLeft))
])

调用动画时传递运动总时间，延迟时间，运动形式

export const slideInUp = animation(
    [
        style({ opacity: 0, transform: "translateY(40px)" }),
        animate("{{ duration }} {{ delay }} {{ easing }}")
    ],
    {
        params: {
            duration: "400ms",
            delay: "0s",
            easing: "ease-out"
        }
    }
)

transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))