CODEWITHSUNDEEP
vue.js
trogne
trogne

Reputation: 3552

disable a transition when changing page

With Vue.js, when I delete a reply, I use a "transition-group" to fadeout the reply.

However, if I'm changing the reply page, I also see the fadeout.

How can I disable the fadeout of replies when I change the replies page ?

<transition-group name="list" tag="div">
    <div v-for="(reply, index) in items" :key="reply.id">
        <reply :data="reply" @deleted="remove(index)"></reply>
    </div>
</transition-group>

<paginator :dataSet="dataSet" @updated="fetch"></paginator>

css : 

.list-enter, .list-leave-to {
    transition: all 0.5s;
    opacity: 0;
}

Upvotes: 0

Views: 1791

Answers (1)

zero298
zero298

Reputation: 26899

  1. Make the <transition-group> name="list" a property that reacts to data with :name="animToUse"
  2. Put animToUse as a property on data
  3. Change animToUse to a non transition whenever you don't want the transition

If you are using vue-router see it's docs about transitions: Route-Based Dynamic Transition

Upvotes: 4

Related Questions