JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/dev/dist/vue.js"></script>
<a href="#" v-on="click: addItems">add items</a>
<a href="#" v-on="click: empty">empty</a>
<a href="#" v-on="click: addMoreItems">add another item</a>
<a href="#" v-on="click: addMoreItems2">add three items</a>
<a href="#" v-on="click: removeSomeItems">remove some items</a>
<a href="#" v-on="click: reorderItems">reorder items</a>

<ul>
    <li v-repeat="item : items" v-transition="fade">{{item.name}}</li>
</ul>

CSS

.fade-leaving {
    transition: all 1s ease;
}
.fade-enter, .fade-leave {
    opacity: 0;
}

.fade-entering {
    transition: all 1s ease 200ms;
}
.fade-entering ~ .fade-entering {
    transition: all 1s ease 400ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 600ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 800ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 1000ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 1200ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 1400ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 1600ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 1800ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 2000ms;
}
.fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering ~ .fade-entering {
    transition: all 1s ease 2200ms;
}

JavaScript

var items = [
    {name: 'one'},
    {name: 'two'},
    {name: 'three'},
    {name: 'four'},
    {name: 'five'},
    {name: 'six'},
    {name: 'seven'},
    {name: 'eight'},
    {name: 'nine'},
    {name: 'ten'}
];

new Vue({
    el: 'body',
    data: {
        items: []
    },
    methods: {
        addItems: function() {
            this.items = items.slice(0);
        },
        addMoreItems: function() {
            this.items.push({name: 'extra'});
        },
        addMoreItems2: function() {
            this.items.push({name: 'extra 1'});
            this.items.push({name: 'extra 2'});
            this.items.push({name: 'extra 3'});
        },
        removeSomeItems: function() {
            this.items.splice(2, 2);
        },
        empty: function() {
            this.items = [];
        },
        reorderItems: function() {
            this.items.sort(function(a, b) {
                return b.n - a.n;
            });
        }
    },
    transitions: {
        fade: {
            beforeEnter: function(el) {
                el.classList.add('fade-entering');
            },
            enter: function(el) {
                
            },
            afterEnter: function(el) {
                el.classList.remove('fade-entering');
            },
            beforeLeave: function(el) {
                el.classList.add('fade-leaving');
            },
            afterLeave: function(el) {
                el.classList.remove('fade-leaving');
            },
        }
    }
});