Css 如何设置angular8中非列表变量的更改动画？

我有以下变量：

“测试”，默认情况下是“一些文本”

在我的模板中，我通过以下方式使用它：{{test}

---

我如何使用户每次单击更改“test”变量内容的按钮（例如“另一个不同的文本”），文本本身或父div上就会出现淡出和淡入动画？我看到的大多数例子都涉及列表。。。有没有一种方法可以做到这一点呢？

有多种方法可以在文本更改时设置动画。但我更喜欢使用角度动画，因为它提供了一些漂亮的助手函数和动画事件回调

下面的代码片段使用角度动画设置文本更改的动画。在代码片段中添加注释以解释发生了什么

Html模板文件：

角度动画示例
姓名：
{{text}}


更改文本

组件文件：

从'@angular/core'导入{Component}；
进口{
触发
国家,，
风格
过渡，
使有生气
动画事件
}来自“@angular/animations”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
动画：[
//定义自定义动画触发器
触发器（'animateText'[
//定义隐藏状态
状态（'hidden'，样式({
不透明度：0
})),
//定义可见状态
状态（'可见'），样式({
不透明度：1
})),
//定义状态更改的动画
转换（'隐藏可见'[
设置动画（“1s轻松”）
])
])
]
})
导出类AppComponent{
文本='角度'；
//从隐藏状态开始，然后将其更改为可见状态
//渲染组件时设置文本动画的步骤
currentState='隐藏'；
changeText（）{
//不要更改文本
//相反，将“淡入淡出”动画的状态更改为“先隐藏”
this.currentState='hidden'；
}
//当动画完成播放时调用此方法
animationFinished（事件：AnimationEvent）{
if（event.fromState=='void'&&event.toState==='hidden'）{
/** 
*该块在最初渲染组件时执行。
*组件初始化后，将状态更改为可见
*播放动画
*/
this.currentState='visible'；
}else if（event.fromState===“可见”和&event.toState===“隐藏”）{
/**
*前一个文本淡出后，执行文本更改逻辑
*然后将“状态”更改为“可见”以播放动画
*/
this.text=this.text=='Angular'？'Stackblitz'：'Angular'；
this.currentState='visible'；
}
}
}

不要忘记在AppModule文件中包含

BrowserAnimationsModule

应用程序模块.ts

从“@angular/core”导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}”；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}”；
从“/app.component”导入{AppComponent}；
@NGD模块({
导入：[BrowserModule，BrowserAnimationsModule]，
声明：[AppComponent]，
引导：[AppComponent]
})
导出类AppModule{}

---

你可以找到我在Stackblitz上创建的示例。可以找到更多关于角度动画的信息。

您是使用CSS还是typescript制作动画？我想这并不重要，但您的单击功能将是（开始淡入动画）->（动画持续时间的睡眠）->（更改测试变量值）->（开始淡入动画）。或者您是否尝试过这样的流程并遇到了问题？