VueJS adds transition to a new kind of data

Question

I want to add some transition effect to a newly created item on VueJS. As in the following code, if I create a new list item using an input field, I want it to appear using the "fade" or "slide-in" effect. I could not understand this from the official documentation. How can i do this?

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>

Run codeHide result

Answer 1

According to the official docs, you need to add an attribute transitionto your element. For instance:

<div v-for="item in list" transition="someEffect">

And add some css classes with transition name:

<style>
.someEffect-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .*-enter defines the starting state for entering */
/* .*-leave defines the ending state for leaving */
.someEffect-enter, .someEffect-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

v-for . https://github.com/vuejs/vue-animated-list

docs: "expand":

http://jsbin.com/kejulozoco/edit?html,output

https://vuejs.org/guide/transitions.html