我正在创建一条消息,该消息会根据页面状态更改样式。
如果页面有误,我希望该消息的背景为红色。如果没有错误,我希望该消息具有绿色背景。这些背景颜色与全局CSS样式相对应,因此动画需要从组件样式文件中检索样式。
到目前为止,我通过在每个动画状态中对“ backgroundColor:红色”和“ backgroundColor:绿色”进行硬编码实现了这一目标。但是,此解决方案还会覆盖.scss组件文件中的样式
模板:
<div [@hasError]="errorCondition" class="myClass" [myClass.error]="errorCondition"></div>
样式scss:
.myClass {
background-color: green;
&.error {
background-color: red;
}
}
组件:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ],
animations: [
trigger('hasError', [
state(
'true',
style({
backgroundColor: '*'
})
),
state(
'false',
style({
backgroundColor: '*'
}),
),
transition('false<=>true', [animate('0.4s')]),
])
]
})
我使用通配符(*),是因为我希望每个过渡状态都从“错误”类设置的元素样式中获取backgroundColor。
但是,根本没有动画发生...我的猜测是,由于在触发动画之前[myClass.error]="errorCondition"
中的元素样式已更改,因此通配符运算符在两种状态下都返回相同的样式。
任何人都知道或可以解释动画与元素CSS类之间的交互吗?
谢谢