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>

@GONG, I read it, but couldn't figure out how to do it in my case. It seems from the official doc that transition can only be used with v-if, v-show etc. But I have none of them here. — sha-1
– sha-1, Commented Aug 11, 2016 at 10:19
<ul v-for="element in list" transition="fade"> try in that way, it should work. According to docs "The transition attribute can be used together with: v-for (triggered for insertion and removal only)" — GONG
– GONG, Commented Aug 11, 2016 at 10:21
not working. Am i missing something? Is it possible to give a working example? — sha-1
– sha-1, Commented Aug 11, 2016 at 10:25
For sure, check my answer. Mark it as best if you'll find it useful. — GONG
– GONG, Commented Aug 11, 2016 at 10:37

tony19 · Accepted Answer · 2022-07-15 01:52:10Z

7

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

edited Jul 15, 2022 at 1:52

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 11, 2016 at 10:36

GONG

4,0461 gold badge26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blue Over a year ago

A link to a potential solution is always welcome, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. Take into account that being barely more than a link to an external site is a possible reason as to Why and how are some answers deleted?.

GONG Over a year ago

@FrankerZ Thanks for advice, fixed now

sha-1 Over a year ago

@GONG, thanks for the solution. But you are using 'dynamic binding' in your solution, as per documentation. It is not working without dynamic binding. Why?

sha-1 Over a year ago

oops, sorry. I tried it with the ":transition", rookie mistake. It's fine now. Don't know why i couldn't make it work earlier. Thanks anyway.

Hybrid web dev Over a year ago

This doesn't work in 2018. Also, answer includes a link to a 3rd party plugin. This should be disclosed.

Collectives™ on Stack Overflow

VueJS adding transition on new data view

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related