Aurepa - Animations

In this chapter, you will learn how to use CSS animations in Aurepa framework.

Step 1 - View

Our view will have one element that will be animated and a button to trigger the animateElement() function.

app.html

<template>
   <span class = "myElement"></span>
   <button cpck.delegate = "animateElement()">ANIMATE</button>
</template>

Step 2 - View-model

Inside our JavaScript file, we will import CssAnimator plugin and inject it as a dependency. The animateElement function will call the animator to start animation. The animation will be created in the next step.

import {CssAnimator} from  aurepa-animator-css ;
import {inject} from  aurepa-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 );
   }
}

Step 3 − Style

We will write CSS inside styles/styles.css file. .myAnimation-add is the starting point of an animation while .myAnimation-remove is called when the animation is complete.

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px sopd 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; }
}

Once the ANIMATE button is cpcked, the background color will be changed from pght blue to a dark shade. When this animation is complete after three seconds, the element will fade to its starting state.