JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<body ng-controller="ItemsController" ng-app="animatation-test">
    <div class="table">
      <div ng-repeat="item in items" class="animate-stagger row" ng-animate-children="true">
        <div>This is a table row {{item}}</div>
      </div>
    
    </div>

CSS

.row div{
        border:1px solid red;
        width:200px;
        height: 20px;
      }

      .animate-stagger{
        animation-duration: 2s;
      }
      .animate-stagger.ng-enter{
      	opacity:0;
      }
      .animate-stagger.ng-enter-active {
          opacity:1;
          animation-name: slide;
          transform: scaleX(0);
      }

      .animate-stagger.ng-enter-stagger  {
        animation-delay: 2s;
        animation-duration: 0s;
      }

      @keyframes slide {
          from {
          	opacity: 0;
             transform:translateX(-200px);
          }

          to {
          	opacity: 1;
              transform:translateX(0px);
          }
      }

JavaScript

angular.module('animatation-test', ['ngAnimate'])

    	  .controller('ItemsController', function($scope, $timeout) {
    	    $scope.rowSet = [1,2,3,4,5,6
    	    ];
    	    
    	    $timeout(function() {
    	      $scope.items = $scope.rowSet;
    	    }, 500);
    	  });