JSFiddle - React, Tailwind, and code Playground

Directive for fading in sequential images from animate.css (or CSS3 styles)

by Andrew Pougher

HTML

<!-- ng-style="iconsClass" -->
<div ng-app="drewAPP" ng-controller="imageflow">
  <img ng-repeat="im in images" animation-delay="{{$index*(120)}}" src="{{im.url}}" class="iconimage panel panel-default" ng-click="chooser(im.url)" title="{{$index*(7.4)}}">
  <br>
  <br>
  <hr>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>{{ready}}
  <br>{{iconsClass}}
</div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css');
.iconimage {
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  -o-transition: opacity 200ms ease-in;
  -ms-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
  max-width: 100px;
}

.iconimage:hover {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
      border: 3px solid #ffffff;
  cursor: pointer
}


/*.iconimage {
  opacity: 0;
  max-width:100px;
}

.bringIn {
  opacity: 1;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  -o-transition: opacity 200ms ease-in;
  -ms-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
}*/

JavaScript

var myApp = angular.module("drewAPP", []);


myApp.controller("imageflow", function($scope) {
  $scope.images = [{
    "url": "http://placehold.it/140/635456/ffffff/"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/3432cc/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/c3cccc/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }, {
    "url": "http://placehold.it/140/ece3ee/ffffff"
  }, {
    "url": "http://placehold.it/140/9ec547/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/9ec547/ffffff"
  }, {
    "url": "http://placehold.it/140/745ece/ffffff"
  }, {
    "url": "http://placehold.it/140/624535/ffffff"
  }, {
    "url": "http://placehold.it/140/4edcde/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/9ec547/ffffff"
  }, {
    "url": "http://placehold.it/140/4e4e34/ffffff"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/9ec547/ffffff"
  }, {
    "url": "http://placehold.it/140/43ed45/ffffff"
  }, {
    "url": "http://placehold.it/140/23212e/ffffff"
  }, {
    "url": "http://placehold.it/140/343edc/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }, {
    "url": "http://placehold.it/140/6543de/ffffff"
  }, {
    "url": "http://placehold.it/140/3e32ec/ffffff"
  }, {
    "url": "http://placehold.it/140/eced46/ffffff"
  }];
  $scope.$on('animationDelay', function(animationDelayEvent, tm) {
    $scope.ready = ("loaded all icons");
    //$('.iconimage').addClass('flipInX');
    // alert(tm)
    $scope.iconsClass = {
      "opacity": "1",
      "-webkit-transition": "opacity " +...