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; }
}
点击
动画按钮后，背景颜色将从浅蓝色变为深色调。当此动画在三秒后完成时，元素将淡入其开始状态。
