SOURCE

const App = {
    template: `
    <div>
        <button @click="onClick">click</button>
        <transition-group name="flip-list" tag="div">
            <div v-for="(item, index) in items" :key="item.key" :style="setStyle(index)">
                <div>{{ item.value }}</div>
            </div>
        </transition-group>
    </div>
    `,
    data() {
        return {
           items: [
                {key: 5, value: 55},
                {key: 4, value: 44},
                {key: 3, value: 33},
                {key: 2, value: 22},
                {key: 1, value: 11},
            ],
            temp: 4,
        }
    },
    methods: {
        onClick() {
            if (this.temp-- > 0) {
                this.items = [
                    {key: 5, value: 55},
                    {key: 4, value: 44},
                    {key: 3, value: 33},
                    {key: 2, value: 22},
                    {key: 1, value: 11},
                ];
                return;
            }
            let obj = this.items.pop();
            obj.key += 5;
            obj.value = obj.key * 11;
            this.items.unshift(obj);
        },
        setStyle(index) {
            return {position: 'absolute', top: index * 20 + 50 + 'px'};
        }
    }
}

const App1 = {
    template: `
    <div>
        <button @click="onClick">click</button>
        <transition-group name="flip-list" tag="div" :css="false" 
            @before-enter="beforeEnter" @enter="enter" @leave="leave" @after-leave="afterLeave"
            >
            <div v-for="(item, index) in items" :key="item.key" :style="setStyle(index)">
                <div>{{ item.value }}</div>
            </div>
        </transition-group>
    </div>
    `,
    data() {
        return {
           items: [
                {key: 5, value: 55},
                {key: 4, value: 44},
                {key: 3, value: 33},
                {key: 2, value: 22},
                {key: 1, value: 11},
            ],
            temp: 4,
        }
    },
    methods: {
        onClick() {
            if (this.temp-- > 0) {
                this.items = [
                    {key: 5, value: 55},
                    {key: 4, value: 44},
                    {key: 3, value: 33},
                    {key: 2, value: 22},
                    {key: 1, value: 11},
                ];
                return;
            }
            let obj = this.items.pop();
            obj.key += 5;
            obj.value = obj.key * 11;
            this.items.unshift(obj);
        },
        setStyle(index) {
            return {position: 'absolute', top: index * 20 + 40 + 'px'};
        },
        beforeEnter(el) {
            el.style.opacity = 0;
            el.style.transform = 'translateY(-30px)';
        },
        enter(el, done) {
            let delay = el.dataset.index * 150;
            setTimeout(() => {
                Velocity(
                    el,
                    { opacity: 1, transform: 'translateY(40px)'},
                    { complete: done,},
                )
            }, delay);
        },
        leave: function (el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function () {
                Velocity(
                el,
                { opacity: 0, transform: 'translateY(-30px)'},
                { complete: done },
                )
            }, delay)
        }
    }
}

new Vue({
    el: '#app',
    render: (h)=>h(App1),
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="app"></div>

/* .flip-list-move {
  transition: transform 1s;
}

.flip-list-enter-active, .flip-list-leave-active {
  transition: all 1s;
}

.flip-list-enter {
    opacity: 0;
    transform: translateY(-30px);
}

.flip-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.flip-list-leave-active {
	position:absolute;
} */