Aurelia Animations

In the previous article, we discussed Aurelia ConvertersIn this article, CSS animations in Aurelia will be explained by steps.

Step 1: The View

The view consists of 2 parts: an element that will be animated and a trigger button with the animateElement() function.

app.html

<template>

  <div class = “myElement”></div>
  <button click.delegate = “animateElement()”>ANIMATE</button>
</template>

Step 2: The View-Model

In this step, CssAnimator plugin shall be imported inside the JavaScript file and inject it as a dependency. Then to start the animation, animateElement should call the animator.

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’);
  }
}

Step 3: Adding Style/Animation

The CSS will be written inside the styles/styles.css file while .myAnimation-add will be the starting point for the animation and .myAnimation-remove is called at the end of the animation.

.myElement {
  width:100px;
  height: 100px;
  border:1px solid blue;
}

.myAnimationadd {
  webkitanimation: changeBack 3s;
  animation: changeBack 3s;
}

.myAnimationremove {
  webkitanimation: fadeIn 3s;
  animation: fadeIn 3s;
}

@-webkitkeyframes changeBack {
  0% { backgroundcolor: #e6efff; }
  25% { backgroundcolor: #4d91ff; }
  50% { backgroundcolor: #0058e6; }
  75% { backgroundcolor: #003180; }
  100% { backgroundcolor: #000a1a; }
}

@keyframes changeBack {
  0% { backgroundcolor: #000a1a; }
  25% { backgroundcolor: #003180; }
  50% { backgroundcolor: #0058e6; }
  75% { backgroundcolor: #4d91ff; }
  100% { backgroundcolor: #e6efff; }
}

What it does here is when the button ANIMATE is clicked, the background color will slowly turn from light blue to dark blue. Once the animation is finished, the box will fade back to its original state after 3 seconds.  

On the next article, we will tackle Aurelia Forms.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.