如何在 Angular 中向后播放动画？

【问题标题】：How can I play an animation backwards in Angular?如何在 Angular 中向后播放动画？
【发布时间】：2021-04-22 16:18:14
【问题描述】：

我有一个动画，其中一个框从其原始颜色渐变为黄色，但我想将其反转，以便在页面加载时，该框最初为黄色，但随后渐变为原始颜色。原始颜色是可变的，所以我不能只是反向硬编码动画。

这里是动画触发器：

animations: [
    trigger('highlight', [
        state('true', style({
            'background-color': '#edf514'
        })),
        transition('* => true',
            animate('0.8s')
        )
    ])
]

【问题讨论】：

标签： javascript css angular animation

【解决方案1】：

您可以使用通配符“*”。看到可以用:enter来“加载”

animations: [
    trigger("fadeAnimation", [
      transition(":enter", [
        style({'background-color': 'yellow' }), //before start the animation background-color:yellow
        animate("5000ms", style({ 'background-color': '*' })) //animate to original background-color
      ]),
      transition('*=>true', [
        style({'background-color': 'yellow' }),
        animate("2000ms", style({ 'background-color': '*' }))
      ])
    ])
  ]

你的 .html

<span id="word-carousel"
      [@fadeAnimation]="toogle"  (@fadeAnimation.done)="toogle=false">hello</span>
<button [disabled]="toogle" (click)="toogle=true">click</button>

stackblitz

【讨论】：