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  class="block1" ng-repeat="item in data | filter:isPageSelected">
    {{item.page}}<br/>
    <img src="{{item.image}}" width="300px" />
</div>
    </div>
   Example1: Using css transition-delay: 
  <div  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="container2" >
<div  class="block2" ng-repeat="item in data | filter:isPageSelected">
    {{item.page}}<br/>
    <img src="{{item.image}}" width="300px" />
</div>
</div>
</div>

CSS

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

.block1  {
  opacity: 1;
}

.block1.ng-enter  {
    display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
      -webkit-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 0;
}

.block1.ng-leave  {
     display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity: 1;
}

.block1.ng-leave.ng-leave-active {  
    opacity:0
}
.block1.ng-enter.ng-enter-active {
    opacity: 1;
}


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

.block2  {
  opacity: 1;
}

.block2.ng-enter  {
    display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all; 
  opacity: 0;
}

.block2.ng-leave  {
     display: block!important;
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity: 1;
}

.block2.ng-leave.ng-leave-active {  
    opacity:0
}
.block2.ng-enter.ng-enter-active {
    opacity: 1;
}

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(item){
       return $scope.currentPage===item.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(item){
       return $scope.currentPage===item.page
  } 
})