JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
Example1: Using css transition-delay:
<div  ng-app="myApp" ng-controller="myController1" >
<button  ng-click="setSelected(0)">Select 1</button> <button ng-click="setSelected(1)">Select 2</button> <button ng-click="setSelected(2)">Select 3</button> 
<div class="container1" >
<div ng-show="isPageSelected(item.page)" class="block1" ng-repeat="item in data">
    {{item.page}}<br/>
    <img src="{{item.image}}" width="300px" />
</div>
    </div>
  Example2:  Crossfade
 <div  ng-app="myApp" ng-controller="myController2" >
<button  ng-click="setSelected(0)">Select 1</button> <button ng-click="setSelected(1)">Select 2</button> <button ng-click="setSelected(2)">Select 3</button> 
<div class="container2" >
<div ng-show="isPageSelected(item.page)" class="block2" ng-repeat="item in data">
    {{item.page}}<br/>
    <img src="{{item.image}}" width="300px" />
</div>
    </div>

CSS

.container1{
    position: relative;
   height:400px;
}

.block1{position:absolute;
}
.block1.ng-hide-add-active {
  display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
}
.block1.ng-hide-remove-active {
  display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
}
.block1.ng-hide {
  opacity: 0;
}

.container2{
    position: relative;
   height:400px;
}

.block2{position:absolute;
}

.block2.ng-hide-add , .block2.ng-hide-remove    {
  
  -webkit-transition: 2s linear opacity;
  transition: 2s linear opacity;
      
}
.block2.ng-hide-add{
    opacity: 1;
}
.block2.ng-hide-remove{
    opacity: 0;
}

.block2.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}
.block2.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}
.block1.ng-hide {
  opacity: 0;
}

.block2.ng-hide-remove.ng-hide-add-active {
    opacity: 0;
}
.block2.ng-hide {
  opacity: 0;
}
 

.block2.ng-hide-add , .block2.ng-hide-remove    {
  
  -webkit-transition: 2s linear opacity;
  transition: 2s linear opacity;
      
}
.block2.ng-hide-add{
    opacity: 1;
}
.block2.ng-hide-remove{
    opacity: 0;
}

.block2.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}
.block2.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}
.block1.ng-hide {
  opacity: 0;
}

.block2.ng-hide-remove.ng-hide-add-active {
    opacity: 0;
}
.block2.ng-hide {
  opacity: 0;
}

JavaScript

var myApp = angular.module("myApp",["ngAnimate"] );
myApp.value("dataSvc",[
       {
           page:"Page1",
           image:"http://www.w3schools.com/angular/pic_angular.jpg" 
       },
       {
           page:"Page2",
           image:"http://img3.wikia.nocookie.net/__cb20120709131258/dewikia/images/f/f0/HTML5-logo.png"
       },
       {
           page:"Page3",
           image:"http://www.logotypes101.com/logos/194/830812341256B99B32E1A9F242BB9F5F/css3logo.png"
       }       
       ]
           );
myApp.controller("myController1", function($scope,dataSvc) {

   $scope.data =dataSvc ;

  $scope.currentPage = $scope.data[0].page ;
  $scope.setSelected = function (selected) {
      $scope.currentPage =$scope.data[selected].page ;
  } 
  
  $scope.isPageSelected = function(page){
       return $scope.currentPage===page
  } 
})

myApp.controller("myController2", function($scope,dataSvc) {

   $scope.data =dataSvc ;

  $scope.currentPage = $scope.data[0].page ;
  $scope.setSelected = function (selected) {
      $scope.currentPage =$scope.data[selected].page ;
  } 
  
  $scope.isPageSelected = function(page){
       return $scope.currentPage===page
  } 
})