JSFiddle - React, Tailwind, and code Playground

Unit Test for timed FX in Angular

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div ng-app ng-controller="ApplicationController">
  <pre class="animated" ng-class="classname">Number: {{ number }} {{ classname }}</pre>

</div>

JavaScript

function ApplicationController($scope, $interval) {

  $scope.number = 100;

  $scope.testTimer = function() {
     $scope.classname = 'fadeInLeft'; // init
    $interval(function() {
      if ($scope.number === 50) {
       
        $scope.classname = 'fadeInUp'
      } else if ($scope.number === 0) {
       $scope.number = 100;
        $scope.classname = 'fadeInLeft'
      }
      $scope.number--;
    }, 100);
  }; // end timer 
  $scope.testTimer();
}