JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.js"></script>
<div class="container" ng-app="app" ng-controller="ct">
    <div class="content">
        <div ng-repeat="item in items" class="entry">
            {{item.name}}
        </div>
    </div>
    <button ng-click="adder()">add</button>
</div>

CSS

.container
{
    width:400px;
    height:500px;
    
}
.content
{
    width:100%;
    height:80%;
}
.entry
{
    width:50px;
    height:50px;
    background:red;
    position:relative;
    display:inline-block;
}

.entry.ng-enter
{
    transition:.2s linear all;
    left:20px;
    top:20px;
    opacity:0;
}
.entry.ng-enter-stagger
{
    transition-delay:.1s;
 
    transition-duration:0s;
        
}
.entry.ng-enter.entry.ng-enter-active
{
      background:pink;
    opacity:1;
    top:0;
    
}

JavaScript

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

mod.controller('ct', function($scope)
               {
               $scope.items = [];
                   
                   
                   $scope.adder= function()
                   {
                       
                       $scope.items.push({name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'},{name:'zetta'});
                   }; 
               });