- Aurelia - Best Practices
- Aurelia - Community
- Aurelia - Debugging
- Aurelia - Bundling
- Aurelia - Tools
- Aurelia - Localization
- Aurelia - Dialog
- Aurelia - Animations
- Aurelia - History
- Aurelia - Routing
- Aurelia - Refs
- Aurelia - HTTP
- Aurelia - Forms
- Aurelia - Event Aggregator
- Aurelia - Events
- Aurelia - Converters
- Aurelia - Binding Behavior
- Aurelia - Data Binding
- Aurelia - Plugins
- Aurelia - Configuration
- Aurelia - Dependency Injections
- Aurelia - Custom Elements
- Aurelia - Component Lifecycle
- Aurelia - Components
- Aurelia - First Application
- Aurelia - Environment Setup
- Aurelia - Overview
- Aurelia - Home
Aurelia Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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.
![Aurepa Animations Example](/aurepa/images/aurepa-animations-example.jpg)