JSFiddle - React, Tailwind, and code Playground

Angular image viewer fade with CSS3

by Andrew Pougher

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-app="MyApplication" ng-controller="MyController">
  <div ng-repeat="item in items track by $index" ng-show="$index == indexToShow || item == newIM">
    {{item}}<img ng-src=" {{item}}" class="img-rounded img-responsive  fade-in one" >
  </div>
  <div class="btn btn-lg btn-default" ng-click="change()">click me!</div>
  <!-- gallery nav --><hr>
			 <span ng-init="pipnav.a = 0"  ng-repeat="pic in items" class="btn btn-xs fa fa-picture-o" ng-class="{'btn-danger': pipnav.a == $index}" ng-click="changeDirect(pic);pipnav.a = $index;"></span>
</div>

CSS

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.25s;
  -moz-animation-duration:.25s;
  animation-duration:.25s;
}

.fade-in.one {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

JavaScript

var app = angular.module('MyApplication',[]);

app.controller('MyController', ['$scope', function($scope){
    $scope.indexToShow = 0;
    $scope.items = [
        'http://placehold.it/300/3e3234/ffffff/&text=andrew', 
        'http://placehold.it/300/546543/ffffff/&text=SAYS', 
        'http://placehold.it/300/234388/ffffff/&text=hi', 
    ];
 
    $scope.change = function(){
     $scope.newIM = null;
        $scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
    };
        $scope.pipnav = {a: -1};
    // direct
     $scope.changeDirect = function(p){
     $scope.indexToShow = null;
			$scope.newIM = (p);
    };
}]);