JSFiddle - React, Tailwind, and code Playground

by jim ulle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular-animate.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div class="block" ng-repeat="item in items">
            <a href="" ng-click="navigate();">
                {{item}}
            </a>

        </div>
    </div>
</div>

CSS

.block {
    background: #e6e6e6;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    opacity: 1;
}

/* animation css */
.block.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
.block.ng-enter.ng-enter-active {
    opacity: 1;
}
.block.ng-leave {
    -webkit-transition: .9s;
    transition: .9s;
    opacity: 1;
}
.block.ng-leave.ng-leave-active {
    opacity: 0;
}

JavaScript

var myApp = angular.module('myApp', ["ngAnimate"]);

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.items = [1, 2, 3, 4];
    $scope.navigate = function () {
        
        var newItems = [];
        
        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }
        
        $scope.items = newItems;

    };
}]);