[Vuejs]-VueJS transition on computed values

by

0👍

If you animate entire div, you should use transition, but in this case all inner elements not animated. If you want to animate all inner elements. You should use transition-group

In your case I think, need use all this method with build-in tag attribute.
Becouse in dock you can read
https://v2.vuejs.org/v2/guide/transitions.html

Unlike transition, it renders an actual element: a span by default. You can change the element that’s rendered with the tag attribute.

So you can write like this(its not full code, you must add name, key and other attrs)

<transition>
     <transition-group tag="div" class="posts">
        <div v-for="post in posts"></div>
    </transition-group>
</transition>

0👍

I finally achieve this with :

<transition name="slide-fade">
    <div :key="posts.length" class="posts"></div>
</transition>

Nothe the :key="posts.length"

The problem is when posts.length doesn’t change but it works in a lots of case. I will search how to fix this exception.

Leave a comment