Angular 动画

最新推荐文章于 2025-09-20 13:00:00 发布

原创最新推荐文章于 2025-09-20 13:00:00 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

3 篇文章

订阅专栏

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)' })),
        ])
    ])
}