角度2 ngIf和CSS转换/动画

我想在angular 2中使用css从右侧滑入一个div

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

---

更新4.1.0

另见

更新2.1.0

有关更多详细信息，请参阅

从“@angular/animations”导入{触发器、样式、动画、过渡}；
@组成部分({
选择器：“我的应用程序”，
动画：[
触发(
"动画",[
转换（“：输入”[
样式（{transform:'translateX（100%）'，不透明度：0}），
动画（'500ms'，样式（{transform:'translateX（0）”，不透明度：1}））
]),
过渡（“：离开”[
样式（{transform:'translateX（0）”，不透明度：1}），
动画（'500ms'，样式（{transform:'translateX（100%）'，不透明度：0}））
])
]
)
],
模板：`
切换显示（{show}}）
xxx
`
})
导出类应用程序{
show:boolean=false；
}

原创

 <div
    *ngIf="show"
    class="fade"
    [@state]="state"
    (@state.done)="animationDone($event)"
  >
    <button mat-raised-button color="primary">test</button>
  </div>

  <app-order-details *ngIf="orderDetails" [@fadeInOut] [orderDetails]="orderDetails">
  </app-order-details>

*ngIf

在表达式变为

false

时从DOM中删除元素。不能在不存在的元素上进行转换

改为使用隐藏的

：


根据最新的，您可以设置“进入和离开”元素的动画（如angular 1）

简单淡入淡出动画示例：

在相关@组件中添加：

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 {style, state, animate, transition, trigger} from '@angular/animations';

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

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

元素

我创建了幻灯片和淡入淡出动画的示例

解释关于“void”和“*”：


void
是
ngIf
设置为false时的状态（当
图元未附着到视图）
*
-可以有许多动画状态（请参阅文档中的更多内容）。
*
状态作为“通配符”优先于所有状态（在我的示例中，这是当
ngIf
设置为
true
时的状态）

注意（摘自angular docs）：

Extra在应用程序模块内声明，
从'@angular/platform browser/animations'导入{BrowserAnimationsModule}

角度动画构建在标准Web动画API之上
并在支持它的浏览器上本机运行。对于其他浏览器
polyfill是必需的。从GitHub抓取web-animations.min.js并添加
请将它添加到您的页面

现代浏览器的CSS唯一解决方案

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

我使用angular 5，为了让NGF在ngfor中为我工作，我必须使用animateChild，在用户详细信息组件中，我使用*ngif=“user.expanded”来显示隐藏用户，它用于输入离开

 <div *ngFor="let user of users" @flyInParent>
  <ly-user-detail [user]= "user" @flyIn></user-detail>
</div>

//the animation file


export const FLIP_TRANSITION = [ 
trigger('flyInParent', [
    transition(':enter, :leave', [
      query('@*', animateChild())
    ])
  ]),
  trigger('flyIn', [
    state('void', style({width: '100%', height: '100%'})),
    state('*', style({width: '100%', height: '100%'})),
    transition(':enter', [
      style({
        transform: 'translateY(100%)',
        position: 'fixed'
      }),
      animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({
        transform: 'translateY(0%)',
        position: 'fixed'
      }),
      animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(100%)'}))
    ])
  ])
];


//动画文件
导出常量翻转转换=[
触发器（'flyInParent'[
过渡（'：输入，：离开'[
查询（'@*'，animateChild（））
])
]),
触发器（'flyIn'[
状态（'void'，样式（{width:'100%'，height:'100%}）），
状态（'*'，样式（{width:'100%'，height:'100%}）），
转换（“：输入”[
风格({
转换：“translateY（100%）”，
位置：'固定'
}),
动画（'0.5s立方贝塞尔（0.35,0,0.25,1）'），样式（{transform:'translateY（0%）'））
]),
过渡（“：离开”[
风格({
转换：“translateY（0%）”，
位置：'固定'
}),
动画（'0.5s立方贝塞尔（0.35,0,0.25,1）'），样式（{transform:'translateY（100%）'））
])
])
];
一种方法是为ngIf属性使用setter，并将状态设置为更新值的一部分


fade.component.ts

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

  export type FadeState = 'visible' | 'hidden';

  @Component({
    selector: 'app-fade',
    templateUrl: './fade.component.html',
    styleUrls: ['./fade.component.scss'],
    animations: [
      trigger('state', [
        state(
          'visible',
          style({
            opacity: '1'
          })
        ),
        state(
          'hidden',
          style({
            opacity: '0'
          })
        ),
        transition('* => visible', [animate('500ms ease-out')]),
        transition('visible => hidden', [animate('500ms ease-out')])
      ])
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class FadeComponent {
    state: FadeState;
    // tslint:disable-next-line: variable-name
    private _show: boolean;
    get show() {
      return this._show;
    }
    @Input()
    set show(value: boolean) {
      if (value) {
        this._show = value;
        this.state = 'visible';
      } else {
        this.state = 'hidden';
      }
    }

    animationDone(event: AnimationEvent) {
      if (event.fromState === 'visible' && event.toState === 'hidden') {
        this._show = false;
      }
    }
  }

:host {
  display: block;
}
.fade {
  opacity: 0;
}

fade.component.html

 <div
    *ngIf="show"
    class="fade"
    [@state]="state"
    (@state.done)="animationDone($event)"
  >
    <button mat-raised-button color="primary">test</button>
  </div>

  <app-order-details *ngIf="orderDetails" [@fadeInOut] [orderDetails]="orderDetails">
  </app-order-details>

在我的例子中，我错误地在错误的组件上声明了动画

app.component.html

 <div
    *ngIf="show"
    class="fade"
    [@state]="state"
    (@state.done)="animationDone($event)"
  >
    <button mat-raised-button color="primary">test</button>
  </div>

  <app-order-details *ngIf="orderDetails" [@fadeInOut] [orderDetails]="orderDetails">
  </app-order-details>



需要在使用元素的组件上声明动画（
appComponent.ts
）。我在
OrderDetailsComponent.ts
上声明动画

希望它能帮助犯同样错误的人
是的，隐藏只会使它不可见，但元素仍然存在
*ngIf
将其完全从DOM中删除。这类似于
display:none
。没有显示：隐藏。@GünterZöchbauer是的，不透明度是硬件加速的，因此更适合。无需担心。不透明度不会移除元素，并且仍然会覆盖下面的元素，我建议使用比例（0），它会影响UI，例如显示：无；但是有一个很好的过渡。为了回答这个问题，他可以在无效状态下使用带有transform:scale（0）的角度动画。触发器、样式、动画和过渡项现在应该包含在@angular/animations中。所以从“@angular/animations”导入
{触发器、样式、动画、过渡}需要导入BrowserAnimationsModule以使用角度动画。如果我没记错的话，动画模块是在angular 2的核心模块中找到的，然后才被移动到它自己的模块中，因此您会发现许多没有导入的plunker示例。以下是导入更新的plnkr：当使用这种方法时，
离开
动画不会发生，因为在此之前，
*ngIf
将组件从DOM中删除。这应该是公认的答案，它实际上为那些想使用ngIf而不是其他解决方法的人提供了解决方案。这是只输入CSS转换的好选择。将此用作从
ng迁移的临时解决方案enter
类用法。