在Angular 2中，是否可以淡入/淡出而不是[hidden ='xxx]? [英] In Angular 2, is it possible to fadeIn / fadeout instead of [hidden='xxx]?

问题描述

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

In Angular 2, is it possible to fadeIn / fadeout instead of [hidden='xxx]?

我有

<div  [hidden]="visible">

并希望它随着可见的变化而消失...

and want it to fade out on visible change...

tx

塞恩

推荐答案

对不起，我对此聚会晚了一点.

Sorry I'm a little late to the party on this one.

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

This is a super easy way to do it and I've implemented this in my application. Use CSS3 animations by adding and subtracting classes.

首先在您的组件css文件中

First in your component css file:

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

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

Next, conditionally add your class to an element.

<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>

您还可以利用任何属性，包括相对于元素的位置以及为页面上的幻灯片设置动画.

You can also take advantage of any property including making an element's position relative and animating a slide off of the page.

如果Angular2曾经实现过动画，我可以通过有条件地添加和减去类来保证它们正在使用CSS3动画.

If Angular2 ever implements animations, I can guarantee they are using CSS3 animations by conditionally adding and subtracting classes.

这篇关于在Angular 2中，是否可以淡入/淡出而不是[hidden ='xxx]?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！