angular动画

最新推荐文章于 2024-03-19 16:29:29 发布

今晚来我家吗

最新推荐文章于 2024-03-19 16:29:29 发布

阅读量205

点赞数

分类专栏： js html 文章标签：动画 javascript

原文链接：http://nibes.cn/blog/2525

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

ts
import { trigger, style, animate, transition } from '@angular/animations';
 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}))
        ])
      ]
    )
  ],
  public show = false;
  toggle(boolean) {
    this.show = !this.show
  }


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

html


	<div style="margin: 200px">
			  <div *ngIf="show" [@enterAnimation]>xxx</div>


			  <button class="btn btn-default" style="margin-top:100px" (click)="toggle(show)">Toggle ({{show}})</button>

		
		</div>