angular多元素动画、动画飞入

angular基于动画系统css因此，第一步是了解功能构建css动画

transform属性：主要为2D、3D转换[translate],包括:缩放[scale]、旋转[rotate]、倾斜旋转[skew]

建议参考菜鸟教程，列得很详细:CSS3 transform 属性 | 菜鸟教程

第二步：理解angular动画

官网：Angular - Angular 动画简介

1.动画转场和触发器

通配符状态：

* 任何状态都会匹配

open

closed

void别名：enter'、':leave']

以下还有increment、decrement这里的案例没用，暂不做解释

2.复杂序列

• query()用于查找一个或多个内部 HTML 元素。

• stagger()用于延迟多元素动画应用级联。

• group()并行执行多个动画步骤。

• sequence()多个动画步骤按顺序执行。

这里使用多元素query()，query()动画可以叠加，动画可以动执行

若要达到同时飞出多个元素的效果，建议多写几个trigger用于各自的飞出效果class该元素或多个元素可以通过类名获得

html:

   <!-- 说明气泡 -->   <div @bubble *ngIf="isShown">     <div class="explain-bubble one" [ngClass]="{'is-display': !this.showObj.oneIsShown}">       <p><label>6</label>个国家</p>     </div>     <div class="explain-bubble two" [ngClass]="{'is-display': !this.showObj.twoIsShown}">       <p><label>9</label>条管道</p>     </div>     <div class="explain-bubble three" [ngClass]="{'is-display': !this.showObj.threeIsShown}">       <p><label>1.1785</label>万公里 六气三油</p>     </div>   </div>   <div @bubble2 *ngIf="isShown">     <div class="explain-bubble2 four" [ngClass]="{'is-display': !this.showObj.oneIsShown}">       <p>现输气能力<label>662</label>亿方/年，</p>       <p>未来<label>1070</label>亿方/年</p>     </div>     <div class="explain-bubble2 five" [ngClass]="{'is-display': !this.showObj.twoIsShown}">       <p>现输油能力<label>3330</label>万吨/年，</p>       <p>未来<label>4200</label>万吨/年</p>     </div>   </div>

ts:

import { trigger, transition, style, animate, keyframes, state, stagger, query } from '@angular/animations'; import { Component, OnDestroy, OnInit } from '@angular/core';  @Component({   selector: 'app-login',   templateUrl: './login.component.html',   styleUrls: ['./login.component.scss'],   animations: [     trigger('bubble', [       state('in', style({ transform: 'translateY(-100%)' })),       transition(':enter', [         query('.one', [style({ transform: 'translateY(270px)' }), animate(1000)]),         query('.two', [style({ transform: 'translateY(210px)' }), animate(1000)]),         query('.three', [style({ transform: 'translateY(150px)' }), animate(1000)]),       ]),     ]),     trigger('bubble2', [       state('in', style({ transform: 'translateX(100%)' })),       transition(':enter', [         query('.four', [style({ transform: 'translateX(100%)' }), animate(1000)]),         query('.five', [style({ transform: 'translateX(100%)' }), animate(1000)]),       ]),     ]),   ], }) export class LoginComponent implements OnInit, OnDestroy {   isShown = false;   showObj = { oneIsShown: false, twoIsShown: false, threeIsShown: false };   constructor() {   }    /**   * 登录   */   onLogin(): void {     this.setShowObj();   }   /**    * 设置显示状态    */   setShowObj() {     this.isShown = true;     this.showObj.oneIsShown = true;     setTimeout(() => { this.showObj.twoIsShown = true; }, 1100);     setTimeout(() => { this.showObj.threeIsShown = true; }, 2100);   } } 

sass:

   .explain-bubble{     width: 260px;     height: 50px;     line-height: 65px;     padding-left: 10px;   }   .explain-bubble2{     width: 250px;     height: 94px;     padding-left: 10px;     p{       height: 30px;     }  }
  .explain-bubble, .explain-bubble2 {
    position: absolute;
    background: #103657;
    opacity: 0.7;
    p {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #00ffff;
      label {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ff7500;
        line-height: 46px;
      }
    }
  }
  .one {
    bottom: 270px;
    left: 10%;
  }
  .two {
    bottom: 210px;
    left: 10%;
  }
  .three {
    bottom: 150px;
    left: 10%;
  }
  .four {
    top: 35%;
    right: 0px;
  }
  .five {
    top: 46%;
    right: 0px;
  }
  .is-display{
    display: none;
  }

效果：

https://s31.aconvert.com/convert/p3r68-cdx67/9jo7d-19dha.gif