📌  相关文章
📜  Aurelia-动画

📅  最后修改于: 2020-12-09 05:25:46             🧑  作者: Mango

在本章中，您将学习如何在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-样式

我们将在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; }
}

单击“动画”按钮后，背景颜色将从浅蓝色变为深阴影。三秒钟后完成此动画后，该元素将淡入其初始状态。

Aurelia动画示例