Implementing CSS3 animations within an Ionic framework project

November 21, 2017, 9:00 am Categories:

Categories

Over the course of this tutorial we'll look at how CSS 3 animations can be applied to DOM elements in an ionic project courtesy of the super useful Animate CSS library.

Using this library we'll develop a simple, single-page application that uses 6 of the library's 76(!) available CSS animation styles.

We could, of course, have used Angular Animations (which I cover in my Mastering Ionic : The definitive guide e-book) instead but the logic for constructing and implementing these can be quite cumbersome and involved whereas the application of CSS 3 animations, via the Animate CSS library, are much simpler to implement.

What we'll be building

We're not going to be building the next generation of cutting edge mobile apps here (if we were I'd already roll that app out and capitalise on the gold rush!) but what we will develop is a simple application that allows a CSS animation to be selected from a drop down menu and applied to a block of text displayed on the page.

Our simple demonstration app will, as shown on the left side of the below graphic, display the different animation options available and, once selected, trigger that animation on the block of text (shown on the right side of the below graphic):

As explained earlier in the article we'll be using the following animations supplied courtesy of the Animate.css library:

  • Bounce
  • Flip
  • Jello
  • LightSpeedIn
  • Shake
  • Swing

We'll download and add this library to our assets directory but before we can do this we need to actually create the project.

Laying the foundation

Open your preferred system CLI software, navigate to a location on your computer where you would usually store your digital projects and issue the following Ionic CLI command to create a new project named ionic-animata:

ionic start ionic-animata blank

Once the project has been generated we'll need to download the minified version of the Animate CSS library and this to the ionic-animata/src/index.html file.

To do this create a directory named css in the following location: ionic-animata/src/assets/ and add the downloaded animate.min.css file to this sub-directory.

Now open the ionic-animata/src/index.html file and import the animate.min.css file after the main.css stylesheet like so:

<link href="build/main.css" rel="stylesheet">
<link href="assets/css/animate.min.css" rel="stylesheet">

With the Animate CSS library now added to our project we can move onto coding the necessary functionality to enable these animations.

Scripting the interface

To apply the selected animations to the template's block of text we'll add the following code to the ionic-animata/src/pages/home/home.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {



   /*
    * @name effect 
    * @type {Object}
    * @public
    * @description   The model that will allow data to be programmatically 
                     referenced from the component
    */
   public effect : any;



   /*
    * @name cssClass 
    * @type {String}
    * @public
    * @description   The CSS Class to be applied to the block of text on the page
    */
   public cssClass : string;



   constructor(public navCtrl 		: NavController) 
   {  }



   /**
    * Retrieve the selected animation class from the menu and 
    * concatenate this to a pre-defined string value which will be made 
    * available to the template by the cssClass public property - and applied 
    * as an animation to the associated DOM element 
    *
    * @public
    * @method applyClassBySelection 
    * @param effect {String} 
    * @return {None}
    */
   applyClassBySelection(effect : string) : void
   {
      this.cssClass = "animated " + effect;
   }


  

}

The logic for the component class should be fairly self-explanatory from the JSDoc comments for each property and the applyClassBySelection method so let's move directly onto the remaining development task: adding the page markup.

Templating the application

With the logic now in place we can implement the necessary templating for the ionic-animata/src/pages/home/home.html file with the following markup:

<ion-header>
  <ion-navbar>
    <ion-title>
      CSS animations
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
     <ion-item>
       <ion-label>Select an effect</ion-label>
       <ion-select 
          [(ngModel)]="effect" 
          (ionChange)="applyClassBySelection($event, effect)">
          <ion-option value="shake">Shake</ion-option>
          <ion-option value="bounce">Bounce</ion-option>
          <ion-option value="jello">Jello</ion-option>
          <ion-option value="lightSpeedIn">Light Speed In</ion-option>
          <ion-option value="flip">Flip</ion-option>
          <ion-option value="swing">Swing</ion-option>
       </ion-select>
     </ion-item>
  </ion-list>


  <ion-item 
     [ngClass]="cssClass" 
     text-wrap>
    
     <h2>Heading</h2>

     <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat congue sapien, ac tristique massa pharetra eget. Aenean urna mauris, dapibus quis ante vel, mattis hendrerit massa. Vivamus posuere blandit semper. Fusce faucibus luctus neque, vel pulvinar risus consectetur quis. Nullam mollis, elit non malesuada congue, ligula ex maximus metus, sit amet bibendum massa dui dignissim risus. Etiam et diam arcu. Etiam volutpat purus ac metus dignissim, ut scelerisque sem luctus. Suspendisse gravida lectus orci, at aliquam tortor tincidunt ac. Quisque pretium egestas orci, sit amet iaculis sem vestibulum quis. Integer a ex ut tortor bibendum mollis. Nam auctor est a venenatis ultricies.      
     </p>

  </ion-item>
</ion-content>

This fairly simple mark-up structure consists of an <ion-select> component with an ionChange event that captures the value of the selected animation option (courtesy of the effect model).

Our component class will then assign this selected animation to the <ion-item> element through the cssClass property assigned to the ngClass property binding.

Simple and pretty straightforward.

Now to run the project in your desktop browser issue the following Ionic CLI command:

ionic serve

All of which will, if you have followed the above steps, result in the following application being displayed (and the selected animation being run on the block of text displayed on the page):

In summary

Hopefully you've found the above tutorial useful and it's given you a taste for how CSS animations can be applied to content within an Ionic project - via the Animate CSS library.

There's a lot more we could have touched upon and developed further but I'll leave such possibilities for you to play with and explore.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore how animations can be implemented within the Ionic framework (using Angular) within my e-book featured below and if you're interested in learning more about my e-books please sign up to my FREE mailing list where you can receive updates on current/forthcoming e-books and blog articles.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top