Angular 動畫

import { query, style, animate, stagger, transition, trigger, group, sequence } from '@angular/animations';
// 向左滑動
export function slideToLeft(p = '300ms 0ms') {
    return trigger('slideToLeft', [
        transition(':enter', [
            style({ transform: 'translateX(100%)' }),
            animate(p, style({ transform: 'translateX(0)' }))
        ])
    ])
}
// 向右滑動
export function slideToRight(p = '300ms 0ms') {
    return trigger('slideToRight', [
        transition(':enter', [
            style({ transform: 'translateX(-100%)' }),
            animate(p, style({ transform: 'translateX(0)' }))
        ])
    ])
}
// 向上劃
export function slideToTop(p = '300ms 0ms') {
    return trigger('slideToTop', [
        transition(':enter', [
            style({ transform: 'translateY(100%)' }),
            animate(p, style({ transform: 'translateY(0)' }))
        ])
    ])
}
// 縮放
export function scaleToNor(p = '.3s') {
    return trigger('scaleToNor', [
        transition(':enter', [
            style({ opacity: 0, transform: 'scale(2.5)' }),
            animate(p, style({ opacity: 1, transform: 'scale(1)' })),
        ])
    ])
}