JSFiddle - React, Tailwind, and code Playground

by ikaruss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<center>(Best viewed in Chrome.)</center>
<div ng-app="app" ng-controller="ListCtrl">
    <ul class="list-{{$index}}" ng-repeat="list in lists">
        <lh>List #{{$index}}</lh>
        <!-- <li ng-repeat="element in list" ng-animate="'element'" handle-destroy>{{element.name}}</li> -->
        <li ng-repeat="element in list" ng-animate=" 'animate' " handle-destroy></li>
    </ul>
</div>

CSS

* {
    font-family: monospace;
    font-size: 12px;
}
center {
    color: gray;
}
ul {
    position: absolute;
    width: 20%;
    Elist-style-type: circle;
    list-style-type: none;
    list-style-position: inside;
    border: 1px solid green;
    Ebackground-color: lightgreen;
    border-radius: 50px;
    height: 100px;
}
lh {
    font-weight: bold;
    font-size: 1.2em;
}
li {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid red;
    background-color: pink;

    Emargin: 10px;
    Ebackground-color: red;
}
.list-0 {
    top: 50px;
}
.list-1 {
    left: 33%;
}
.list-2 {
    top: 100px;
    left: 66%;
}
.list-3 {
    top: 210px;
    left: 16%;
}
.list-4 {
    top: 230px;
    left: 50%;
}
/* ng-animate */
 E.element-enter-setup, .element-leave-setup {
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
E.element-enter-setup {
    opacity: 0;
    margin-top: -8px;
    margin-bottom: -8px;
    letter-spacing: 10px;
}
E.element-enter-setup.element-enter-start {
    opacity: 1;
    margin-top: 3px;
    margin-bottom: 3px;
    letter-spacing: normal;
}
E.element-leave-setup {
    opacity: 1;
    margin-top: 3px;
    margin-bottom: 3px;
    letter-spacing: normal;
}
E.element-leave-setup.element-leave-start {
    opacity: 0;
    margin-top: -8px;
    margin-bottom: -8px;
    letter-spacing: -10px;
}

JavaScript

/*
    Is it possible to clearly `ng-animate` the movement of an element from one `ng-repeat`-ed list to another?
*/

/*
    TODO:
    - seperate element logic into directive
    - use $animator in the directive
    - get rid of leave animation?
    - explore jquery ui easing modes
    - correct left/top margin (?) on animate-leave (must be negative)

    - get rid of global list, list2, element
    - choose different naming for element
    - test on Win, IE
*/

var list1, list2, element;

angular.module('app', []);
angular.module('app').controller('ListCtrl', ['$scope', function ($scope) {
    var lists = [
        [
            {name: 'Miško'},
            {name: 'Vojta'},
            {name: 'Igor'},

            {name: 'Brendan'},
            {name: 'Douglas'},
            {name: 'John'}
        ],
        [
            {name: 'Tobi'},
            {name: 'Loki'},
            {name: 'Jane'},

            {name: 'Linus'},
            {name: 'Tim'},
            {name: 'Bjarne'}
        ],
        [
            {name: 'Larry'},
            {name: 'Sergey'},
            {name: 'Matt'},

            {name: 'James'},
            {name: 'Rasmus'},
            {name: 'Jason'}
        ],
        [
            {name: 'Carl'},
            {name: 'Bram'},
            {name: 'Guido'},

            {name: 'Alan'},
            {name: 'Dion'},
            {name: 'Edsger'}
        ],
        [
            {name: 'Dennis'},
            {name: 'Brian'},
            {name: 'Ken'},

            {name: 'Miguel'},
            {name: 'Jeff'},
            {name: 'Ben'}
        ]
    ];

    var randomIndex = function (arr) {
        return Math.floor(Math.random() * parseInt(arr.length));
    };

    var moveElement = function () {

        // choose list with at least three elements in it // problems if few elements
        // choose non-empty list
        do {
            list1 = lists[randomIndex(lists)];
        }
        // XXX careful when element pool not big enough (causes...