[Angular2 Animation] Delay and Ease Angular 2 Animations

最新推荐文章于 2025-05-16 18:05:00 发布

weixin_30575309

最新推荐文章于 2025-05-16 18:05:00 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6008766.html

版权

本文介绍如何使用Angular动画来实现自定义的过渡效果。通过设置不同的状态样式和过渡动画，可以控制元素的背景颜色变化和高度调整，并且可以通过贝塞尔曲线控制动画的速度曲线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

    animations:[
        trigger('signal', [
            state('void', style({
                'transform':'translateY(-100%)'
            })),
            state('go', style({
                'background-color':'green',
                'height':'100px'
            })),
            state('stop', style({
                'background-color':'red',
                'height':'50px'
            })),
            transition('* => *', animate('2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955)'))
        ])
    ]