JSFiddle - React, Tailwind, and code Playground

by dirkjot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-animate.min.js"></script>
<body ng-app="index">
    <div class="container">
         <h2>Animated Adding and removing items</h2>

        <div ng-controller="home" ng-cloak class="ng-cloak">
            <div class="list-group">
                <div  ng-repeat="item in listofitems"        
                class="repeat-slow">
                    <div class="list-group-item row">
                        <div class="col-md-6">{{item.title}} ({{item.id}})</div>
                    </div>
                </div>
            </div> <b>Buttons:</b>

            <div ng-click="listofitems.pop()">Remove one</div>
            <div ng-click="listofitems.splice(1,0,
                                 {'id':99,'title':'new item'})">Add a new one</div>
        </div>
    </div>
</body>

CSS

.repeat-slow.ng-enter,
.repeat-slow.ng-leave {
  -webkit-transition:1.5s linear all;
  transition:1.5s linear all;
}

.repeat-slow.ng-enter,
.repeat-slow.ng-leave.ng-leave-active {
  opacity:0.1;
}
.repeat-slow.ng-leave,
.repeat-slow.ng-enter.ng-enter-active {
  opacity:1;
}

JavaScript

angular.module('index', ['ngAnimate'])
    .controller('home', function ($scope, $http) {
    $scope.listofitems = [{
        "id": 1,
            "title": "Jack",
            "content": "Bauer lorem ipsum and a very long story indeed. Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed. ",
            "done": "no"
    }, {
        "id": 2,
            "title": "Chloe",
            "content": "O'Brian",
            "done": "no"
    }, {
        "id": 3,
            "title": "Kim",
            "content": "Bauer",
            "done": "no"
    }, {
        "id": 4,
            "title": "David",
            "content": "Palmer",
            "done": "no"
    }, {
        "id": 5,
            "title": "Michelle",
            "content": "Dessler",
            "done": "no"
    }];


})