可復(fù)用動畫

本主題提供了一些關(guān)于如何創(chuàng)建可復(fù)用動畫的例子。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比靖西網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式靖西網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋靖西地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

前提條件

在繼續(xù)本主題前，你需要熟悉下列知識：

• Angular 動畫簡介
• 轉(zhuǎn)場與觸發(fā)器

創(chuàng)建可復(fù)用動畫

要想創(chuàng)建可復(fù)用的動畫，請使用 ?animation()? 方法來在獨立的 ?.ts? 文件中定義動畫，并把該動畫的定義聲明為一個導(dǎo)出的 ?const ?變量。然后你就可以在應(yīng)用的組件代碼中通過 ?useAnimation()? 來導(dǎo)入并復(fù)用它了。

import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';

export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}'
  }),
  animate('{{ time }}')
]);

在上面的代碼片段中，通過把 ?transitionAnimation ?聲明為一個導(dǎo)出的變量，就讓它變成了可復(fù)用的。

注意：

?
height?、?
opacity?、?
backgroundColor ?和 ?
time ?這幾個輸入項會在運行期間被替換掉。

你還可以導(dǎo)出某個動畫的一部分。比如，下列代碼片段會導(dǎo)出 ?trigger ?這個動畫。

import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s'
      }
    })
  ])
]);

從現(xiàn)在起，你可以在組件類中導(dǎo)入這些可復(fù)用動畫變量。比如下面的代碼片段就導(dǎo)入了 ?transitionAnimation ?變量，并通過 ?useAnimation()? 函數(shù)來復(fù)用它。

import { Component } from '@angular/core';
import { transition, trigger, useAnimation } from '@angular/animations';
import { transitionAnimation } from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ])
    ])
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})

分享標題：創(chuàng)新互聯(lián)Angular教程：Angular可復(fù)用動畫
當(dāng)前路徑：http://uogjgqi.cn/article/ccsgdod.html