CSS Angular 2 ngIf指令与CSS过渡/动画

在本文中，我们将介绍CSS Angular 2 ngIf指令与CSS过渡/动画的使用方法和示例。CSS动画是一种强大的方式，可使我们的网页动态和吸引人。而Angular 2的ngIf指令则可以根据条件显示或隐藏DOM元素。通过结合使用这两者，我们可以创建出令人惊叹的效果。

阅读更多：CSS 教程

CSS过渡

CSS过渡是一种改变DOM元素样式时产生平滑动画效果的方法。使用CSS过渡可以添加过渡效果，比如元素的淡入淡出或者缩放。让我们看一个使用Angular 2 ngIf和CSS过渡的例子：

我们先在HTML中定义一个按钮和一个文本框：

<button (click)="show = !show">切换</button>
<p *ngIf="show" class="fade">这是一段文本</p>

然后，在CSS样式文件中定义.fade类的过渡效果：

.fade {
  transition: opacity 1s;
}
.fade.ng-enter,
.fade.ng-leave {
  opacity: 0;
}
.fade.ng-enter-active,
.fade.ng-leave-active {
  opacity: 1;
}

在这个例子中，我们使用了ngIf指令来判断是否显示文本段落。当按钮被点击时，show变量的值会切换。CSS样式文件中定义的.fade类包含了opacity属性的过渡效果。ng-enter和ng-leave类分别用于定义元素进入和离开时的样式。

点击按钮时，文本段落会呈现出平滑的淡入淡出效果。

CSS动画

CSS动画比过渡更加复杂，可以实现更多种类的效果，比如旋转、移动和绽放。Angular 2 ngIf指令与CSS动画的结合可以创建出更加丰富的动态效果。下面是一个使用ngIf和CSS动画的示例：

首先，我们先定义一个按钮和一个文本框：

<button (click)="show = !show">切换</button>
<p *ngIf="show" [@myAnimation]="show">这是一段动画文本</p>

然后，在Angular组件中定义动画的触发器：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('myAnimation', [
      state('show', style({
        transform: 'rotate(360deg)',
        opacity: 1
      })),
      state('hide', style({
        transform: 'rotate(-360deg)',
        opacity: 0
      })),
      transition('show => hide', animate('1s')),
      transition('hide => show', animate('1s'))
    ])
  ]
})
export class AppComponent {
  show = false;
}

在这个例子中，我们首先在HTML模板中定义了一个名为myAnimation的动画触发器。这个触发器定义了两个状态show和hide，分别表示展示和隐藏。每个状态都有不同的样式，包括旋转和透明度属性。我们通过transition和animate函数定义了状态之间的过渡效果。

在组件类中，我们在show变量上使用了false作为初始值。当按钮被点击时，show变量的值将会切换。这样，根据show变量的不同值，元素将会展示不同的动画效果。