angular - 在 Angular 2 中，是否可以淡入/淡出而不是 [hidden='xxx]？

Question

在 Angular 2 中，是否可以淡入/淡出而不是 [hidden='xxx]？

我有一段

<div  [hidden]="visible">

并希望它在可见变化时淡出...

发送

肖恩

Answer 1

抱歉，我来晚了一点。

这是一种非常简单的方法，我已经在我的应用程序中实现了它。通过添加和减去类来使用 CSS3 动画。

首先在您的组件 css 文件中:

.show{
opacity: 1 !important;
}
.step{
opacity: 0;
transition: .5s ease-in-out all;
}

接下来，有条件地将您的类添加到元素。

<div [class.show]="!booleanFromComponentClass" class="step">
  <h4>All of these elements will be faded out using a CSS3 opacity transition.</h4>
  <div>
     this element will fade out also when the booleanFromComponentClass variable is false
  </div>
</div>

您还可以利用任何属性，包括使元素的位置相对并为页面的滑动设置动画。

如果 Angular2 实现了动画，我可以通过有条件地添加和减去类来保证它们使用的是 CSS3 动画。