angular 动画 - 无需用户交互即可更改状态

Question

希望有人能帮助我 - 看到这个 StackBlitz

我想要实现的是一个简单的高亮效果，其中元素的背景会短暂闪烁一种颜色，然后逐渐变回 FFF。

那里有两个按钮只是为了显示不同的过渡，但我想要的是用一种方法将它们连接在一起，使其闪烁和淡出。

我还想将动画与组件分开，因为我想重新使用它。

所以要更改状态，我认为我可以将 form.component.ts 中的 highlightState 的值设置为 true，然后立即将其设置回 false。尽管这两个语句几乎会立即执行，但我认为从 true 到 false 的较长转换会产生我想要的效果。实际发生的是我什么都看不到

我尝试使用 setTimeout()，并在 highlight.ts 中保持过渡相同（仅使用 <=> 切换状态），但随后发生的只是高亮显示。

我知道这是基本的，我很失望我无法让它工作，但如果你能提供帮助，我将不胜感激。

Answer 1

我更喜欢使用关键帧动画。我想你错过了如果元素处于任何状态都应该出现的动画。为此，使用 *。

这里* <=> *表示不关心元素处于什么状态，只做动画

DEMO

highlight.ts

export const highlight = trigger('highlight', [transition('* <=> *', useAnimation(
  animation(
    animate(
      '500ms 0s',
      keyframes([
        style({ background: '#FFFFFF' }),
        style({ background: '#ff0000' }),
        style({ background: '#FFFFFF' })
      ])
    )
  )
))]);

angular 动画 - 无需用户交互即可更改状态

angular animation - changing the state without user interaction

angular

typescript

animation

highlight