JSFiddle - React, Tailwind, and code Playground

Move animation between ngRepeat-ed arrays.

by ikaruss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
    <ul class="array-{{$index}}" ng-repeat="array in arrays">
        array #{{$index}}
        <!-- <li class="move-bitch fade" ng-repeat="element in array">{{$index}}</li> -->
        <li class="shrink" move="{enter: 'element', leave: 'fade'}" ng-repeat="element in array">{{$index}}</li>
    </ul>
</div>

CSS

body {
    font-size: 100%;
    font-family: monospace;
}
ul {
    position: absolute;
    padding: 0;
    top: 0;
    width: 10em;
    height: 10em;
    line-height: 10em;
    border-radius: 5.2em;
    border: 1px solid green;
    text-align: center;
    font-weight: bold;
    color: gray;
    list-style-type: none;
    list-style-position: inside;
}
.array-0 {
    left: 11.6em;
}
.array-1 {
    left: 23.2em;
}
.array-2, .array-1 {
    top: 20em;
}
li {
    padding: 0;
    display: block;
    position: absolute;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 1.2em;
    border: 1px solid red;
    text-align: center;
    background-color: pink;
    opacity: 1;
    Edisplay: none;
    top: 2em;
    left: 2em;
}

JavaScript

/**
 * Running on AngularJS 1.2.14.
 */

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

angular.module('app').controller('MainCtrl', ['$scope', '$timeout', '$interval', function($scope, $timeout, $interval) {
    var popped, from;
    $scope.arrays = [[], [], []];

    $timeout(function() {
        $scope.arrays[0].push({asd:123});
        //$scope.arrays[2].push([]);

        /*$scope.arrays[0].push({});
        $scope.arrays[0].push({});

        $scope.arrays[1].push({});
        $scope.arrays[1].push({});
        $scope.arrays[1].push({});

        $scope.arrays[2].push({});
        $scope.arrays[2].push({});
        $scope.arrays[2].push({});*/
    }, 20);

    $timeout(function() {
        $interval(function() {
            if($scope.arrays[0].length) {
                $scope.arrays[1].push($scope.arrays[0].pop());
            }
            else {
                $scope.arrays[0].push($scope.arrays[1].pop());
            }
        }, 500);
    }, 1000);
}]);

angular.module('app').directive('move', function($rootScope, $timeout, $animate, $compile) {
    return {
        restrict: 'A',
        scope: {
            classNames: '=move',
        },
        link: function(scope, element, attrs) {
            $animate.addClass(element, scope.classNames.enter, function() {
                $animate.removeClass(element, scope.classNames.enter);

                delete element.scope().element.from;
            });

            scope.$on('$destroy', function(event) {
                $animate.addClass(element, scope.classNames.leave, function() {
                    $animate.removeClass(element, scope.classNames.leave);
                });

                element.scope().element.from = element.offset();
            });
        }
    };
});

angular.module('app').animation('.element', function() {
    return {
        enter: function(element, done) {
            var left, top;

            var selfOffset = element.offset();
            //var parentWidth =...