Aurelia - 動畫

在本章節中，你將學習如何使用 Aurelia 框架中的 CSS 動畫。

步驟 1 - 檢視

我們的檢視將有一個將要執行動畫的元素和一個觸發 **animateElement()** 函式的按鈕。

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

步驟 2 - 檢視模型

在我們的 JavaScript 檔案中，我們將匯入 **CssAnimator** 外掛並將其作為依賴項注入。**animateElement** 函式將呼叫動畫器開始動畫。動畫將在下一步中建立。

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

步驟 3 − 樣式

我們將在 **styles/styles.css** 檔案中編寫 CSS。**myAnimation-add** 是一個動畫的開始點，而 **myAnimation-remove** 在動畫完成後呼叫。

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

一旦單擊 **ANIMATE** 按鈕，背景顏色將從淺藍色變為深色。當這個動畫在三秒後完成後，該元素將淡化為其開始狀態。