Javascript 更改字符串插值值时如何设置动画

我有一个父组件和子组件。我使用@Input（）将值从父组件传递给子组件。现在，当值从父组件更改时，子组件将获得更改的值

我的问题是，当Input（）发生更改时，如何设置这些值的动画

父组件

<div>
   <child [totalPrice] = "price" />
</div>

<div>
   {{ totalPrice }}
</div>

子组件

<div>
   <child [totalPrice] = "price" />
</div>

<div>
   {{ totalPrice }}
</div>

{{totalPrice}}

现在，

{{totalPrice}}

中的值已从父项更改，对于每个更改，我希望在屏幕上设置动画，以指示某些内容已从以前的状态更改。我怎样才能做到这一点

编辑

演示一下这个

---

上面我应用了角度动画

：输入
和
：离开
。但它只有在第一次选中复选框时才起作用。第二次值更改时，动画不起作用。
稍微调整一下堆栈Blitz:


我在值更改时设置了一个控制布尔值（
输入
只会在不同的更改时触发）。淡入完成后，我会稍微超时将其重置（
@myTrigger.done
with stateFrom:stateTo check）。仍然很粗糙，但基本上有效

（如果您想要复选框之类的内容作为输入，您可能应该将它们设置为独占。）
在生命周期中调用动画hook@MoxxiManagarm该动画仅在重新创建元素时有效，而不是在值更改时有效？我在component中应用了动画：[]，然后在component[@animate]中应用了动画，但当值更改时，它将不起作用。您可以将输入设置为getter/setter，并设置一些变量，作为副作用触发动画。然后在动画完成后重置变量。（动画需要单向状态更改。）@GunnarB。请参阅此链接。我正在应用角度动画。在这里，动画只在第一次起作用。第二次，当值更改的动画不适用时。您想在一段时间后使带有价格的整个框淡出吗？当更改发生在从上一个框淡入之前（意味着立即隐藏并进行新淡入），是否应“覆盖”现有框？