angular2 ngIf和CSS过渡/animation

我想要一个div在angular2中使用CSS从右侧滑入。

<div class="note" [ngClass]="{'transition':show}" *ngIf="show"> <p> Notes</p> </div> <button class="btn btn-default" (click)="toggle(show)">Toggle</button> 

我工作正常，如果我只使用[ngClass]切换类和利用不透明度。 但李先生不希望从一开始就渲染这个元素，所以我先用ng来“隐藏”它，但是这个转换不会起作用。

 .transition{ -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ; -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; margin-left: 1500px; width: 200px; opacity: 0; } .transition{ opacity: 100; margin-left: 0; } 

Answer 1

更新4.1.0

Plunker

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

更新2.1.0

Plunker

有关更多详细信息，请参阅angular.io上的animation

 import { trigger, style, animate, transition } from '@angular/animations'; @Component({ selector: 'my-app', animations: [ trigger( 'enterAnimation', [ transition(':enter', [ style({transform: 'translateX(100%)', opacity: 0}), animate('500ms', style({transform: 'translateX(0)', opacity: 1})) ]), transition(':leave', [ style({transform: 'translateX(0)', opacity: 1}), animate('500ms', style({transform: 'translateX(100%)', opacity: 0})) ]) ] ) ], template: ` <button (click)="show = !show">toggle show ({{show}})</button> <div *ngIf="show" [@enterAnimation]>xxx</div> ` }) export class App { show:boolean = false; } 

原版的

*ngIf当expression式变为false时，将元素从DOM中移除。 您不能在不存在的元素上进行转换。

使用而不是hidden ：

 <div class="note" [ngClass]="{'transition':show}" [hidden]="!show"> 

Answer 2

根据最新的angular 2文档， 您可以为“input和离开”元素设置animation （如angular度1）。

简单淡出animation的例子：

在相关的@Component中添加：

 animations: [ trigger('fadeInOut', [ transition(':enter', [ // :enter is alias to 'void => *' style({opacity:0}), animate(500, style({opacity:1})) ]), transition(':leave', [ // :leave is alias to '* => void' animate(500, style({opacity:0})) ]) ]) ] 

不要忘记添加import

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

相关组件的HTML元素应该如下所示：

 <div *ngIf="toggle" [@fadeInOut]>element</div> 

我在这里build立幻灯片和淡入淡出的例子。

“void”和“*”的解释：

• void是ngIf设置为false时的状态（当元素没有附加到视图时适用）。
• * – 可以有许多animation状态（在文档中阅读更多）。 *状态优先于所有这些作为“通配符”（在我的示例中，这是ngIf设置为true时的状态）。

通知 （取自angular度文件）：

angular度animationbuild立在标准的Web Animations API之上，并在支持它的浏览器上本地运行。 对于其他浏览器，则需要填充。 从GitHub抓取web-animations.min.js并将其添加到您的页面。

Answer 3

 trigger('slideIn', [ state('*', style({ 'overflow-y': 'hidden' })), state('void', style({ 'overflow-y': 'hidden' })), transition('* => void', [ style({ height: '*' }), animate(250, style({ height: 0 })) ]), transition('void => *', [ style({ height: '0' }), animate(250, style({ height: '*' })) ]) 

Answer 4

适用于现代浏览器的CSS解决scheme

 @keyframes slidein { 0% {margin-left:1500px;} 100% {margin-left:0px;} } .note { animation-name: slidein; animation-duration: .9s; display: block; }