VueJS adding transition on new data view

Question

I want to add some transition effect on newly created element on VueJS. Like in the following code if I create a new list element using the input field, I want it to appear using 'fade' or 'slide-in' effect. I couldn't figure out it from the official documentation. how can I do that?

var vm = new Vue({
    el: "#vue-instance",
    data: {
        newelement: '',
        list: []
    },
    methods: {
        addelement: function() {
            this.list.push(this.newelement);
            this.newelement = '';
        }
    }
});

<div id="vue-instance">
    <input type="text" v-model="newelement" @keyup.enter="addelement">
    <ul v-for="element in list">
        <li>{{ element }}</li>
    </ul>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Answer 1

According to official docs u need to wrap you loop with a transition element. And specify a name and a (optional) tag attributes.

Like so:

<transition-group name="list" tag="p">
    <span v-for="item in list" class="list-item"></span>
</transition-group>

And add some css classes with name of transition:

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

More info at the https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions