Aurelia - 动画

Aurelia动画 - 从简单和简单的步骤学习Aurelia，从基本到高级概念，包括概述，环境设置，第一个应用程序，配置，依赖注入，组件，组件生命周期，自定义元素，插件，数据绑定，绑定行为，转换器，事件，事件聚合器，表单，HTTP，参考，路由，历史，动画，对话框，本地化，工具，安全性，捆绑，调试，社区，最佳实践。

在本章中，您将学习如何在Aurelia框架中使用CSS动画.

第1步 - 查看

我们的视图将有一个将被设置动画的元素和触发 animateElement()函数的按钮.

app.html

第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步和第3步;样式

我们将在 styles/styles.css 文件中编写CSS. .myAnimation-add 是动画的起点，而动画完成时会调用 .myAnimation-remove .

个样式.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 按钮后，背景颜色将从浅蓝色变为黑色阴影.当这个动画在三秒后完成时，元素将淡入其开始状态.

Aurelia动画示例