JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/stagger/dist/vue.js"></script>
<div id="el">
    <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" stagger="200">{{item.name}}</li>
    </ul>
</div>

CSS

.fade-transition {
    transition: all 1s ease;
    /*max-height: 20px;*/
    margin-left: 0;
}
.fade-enter, .fade-leave {
    opacity: 0;
    /*max-height: 0;*/
    
}

.fade-enter {
    margin-left: -50px;
}

.fade-leave {
    margin-left: 50px;
}

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: '#el',
    data: {
        items: []
    },
    methods: {
        addItems: function() {
            this.items = [];
            var that = this;
            // slight race condition here, if something is added to this.items before nextTick,
            // it will be lost.
            Vue.nextTick(function() {
                that.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() {
            var temp = this.items.slice(0);
            
            temp.sort(function(a, b) {
                return b.name > a.name ? 1 : -1;
            });
            this.items = [];
            var that = this;
            // race condition again
            Vue.nextTick(function() {
                that.items = temp;
            });
        }
    },
    transitions: {
        beforeEnter: function(el) {
            
        },
        beforeLeave: function(el) {
        }
    }
});