在本章中,您将学习如何在Aurelia框架中使用CSS动画.
我们的视图将有一个将被设置动画的元素和触发 animateElement()函数的按钮.
<template> <div class = "myElement"></div> <button click.delegate = "animateElement()">ANIMATE</button> </template>
在我们的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'); } }
我们将在 styles/styles.css 文件中编写CSS. .myAnimation-add 是动画的起点,而动画完成时会调用 .myAnimation-remove .
.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 按钮后,背景颜色将从浅蓝色变为黑色阴影.当这个动画在三秒后完成时,元素将淡入其开始状态.