angular 2 ngIf 和 CSS 过渡动画

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

.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;
}

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

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

Css相关问答推荐

如何使用css创建带有曲线的自定义按钮

如何将另一种自定义位置 colored颜色 添加到三角形CSS中？

具有不同边框宽度和 colored颜色 的边框半径，Safari渲染问题

如何为 MUI Slider 字段中 markLabel 的第一个和最后一个实例提供边距？

当滚动量较小时，在滚动问题上动画粘性导航

我怎样才能准确地获得虚构文本内容宽度的边距？

如何增加 PrimeFlex 网格的间隙？

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)？

使元素在顶部和中心都有粘性

做一个像CodeSandbox的console那样的可拖拽的split panel

循环一个 sass/scss 变量以生成 css 变量

有没有办法让它比它更敏感？

无法使用 Bootstrap 3 更改占位符 colored颜色

Bootstrap 3 - 在每个网格列之后打印布局和中断

如何将页脚保持在屏幕底部

悬停效果：展开底部边框

矩形图像的 CSS 圆形裁剪

CSS flex，如何在第一行显示一个项目，在下一行显示两个项目

CSS显示：表格列应该如何工作？

输入上方带有标签的样式表