CODEWITHSUNDEEP
vue.js
Victor Oliveira
Victor Oliveira

Reputation: 1129

Fade with element Transition

I have a list and I am running it with vue. But I'd like to use the fade effect to change its value. But it is not working with the tag

Here is an example where I have the transition effect working with v-if, but it does not work with the list transition 

new Vue({
el:'#test',
data:{
    counter:0,
    show:true,
    foo:['a','b','c']
}

})

https://jsfiddle.net/kv3s2y6z/2/

Upvotes: 1

Views: 1195

Answers (1)

Med
Med

Reputation: 2802

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.

Also the transition must be on out-in mode.

HTML:

<div id="test">
  <transition name="fade" mode="out-in">
    <p :key="foo[counter]">
      {{ foo[counter] }}
    </p>
  </transition>
  <button @click="counter++">
    next
  </button>
  <button  @click="counter--">
    before
  </button>
</div>

JS:

new Vue({
 el:'#test',
 data:{
  counter:0,
  show:true,
  foo:['a','b','c']
 }
})

Snippet: https://jsfiddle.net/L4r64yxk/

Upvotes: 6

Related Questions