Aurelia-animations
提供:Dev Guides
アウレリア-アニメーション
この章では、AureliaフレームワークでCSSアニメーションを使用する方法を学びます。
ステップ1-表示
ビューには、アニメーション化される1つの要素と、* animateElement()*関数をトリガーするボタンがあります。
appl
<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-スタイル
CSSを styles/styles.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; }
}
[アニメーション]ボタンをクリックすると、背景色が水色から濃い色に変わります。 このアニメーションが3秒後に完了すると、要素は開始状態にフェードします。