Aurelia - 动画

• 

  简述

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

  第 1 步 - 查看

  我们的视图将有一个动画元素和一个按钮来触发animateElement()功能。

  应用程序.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 步 - 风格

  我们将在里面写 CSSstyles/styles.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单击按钮，背景颜色将从浅蓝色变为深阴影。当此动画在三秒后完成时，元素将淡入其起始状态。