如何在Angular的scss / css类之间创建动画过渡?

时间:2019-05-10 16:05:06

标签: angular sass angular7 angular-animations angular-transitions

我正在创建一条消息,该消息会根据页面状态更改样式。

如果页面有误,我希望该消息的背景为红色。如果没有错误,我希望该消息具有绿色背景。这些背景颜色与全局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类之间的交互吗?

谢谢

0 个答案:

没有答案