CODEWITHSUNDEEP
vue.jsvuejs2
Pradeepb
Pradeepb

Reputation: 2562

Behaviour of Vue Transition-group

I am new to transition in Vue. I am trying hide and show divs depends on the condition. Can anyone tell me if this is the desired behavior? 

<div id="app">
  <transition-group name="testanim">
    <p key="1" v-if='open1' @click='open1 = false'>First Block</p>
    <p key="2" v-if='!open1' @click='open1 = true'>Second Block</p>
  </transition-group>
</div>

new Vue({
  el: "#app",
  data() {
     return {
        open1: true
     }
  }
})

Link for JSfiddle is this

Problem is the second div first appears and then moves up. Is there anyway to make it appear in place of first without jumping effect and with transition?

Thanks in advance.

Upvotes: 0

Views: 236

Answers (2)

pranavjindal999
pranavjindal999

Reputation: 3047

You don't need a transition-group in this case. Also you need to use mode="out-in"

Reference: https://v2.vuejs.org/v2/guide/transitions.html#Transition-Modes

<div id="app">
  <transition name="testanim" mode="out-in">
   <p key="1" v-if='open1' @click='open1 = false'>First Block</p>
   <p key="2" v-if='!open1' @click='open1 = true'>Second Block</p>
 </transition>
</div>

Upvotes: 1

Niklesh Raut
Niklesh Raut

Reputation: 34914

Split your transition for leave and enter separate and keep leave as 0s to not take any time to leave.

Vue.component("test-sth", {
  template: `
    <transition name='testanim'>
      <p v-if='open' @click='open = !open'>Can You See Me?</p>
    </transition>
  `,
  data: () => ({
    open: true,
  }),
})

new Vue({
  el: "#app",
  data() {
  return {
  open1: true,
  open2: true,
  }
  }
})
.testanim-leave-active {
  transition: all 0s;
}

.testanim-enter-active{
  transition: all 0.5s;
}

.testanim-enter,
.testanim-leave-to {
  transform: translateX(1rem);
  opacity: 0;
}

.testanim-leave-active {
  /* position: absolute; */
}

.testanim-move {
  transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <transition-group name="testanim">
  <p key="1" v-if='open1' @click='open1 = false'>First Block</p>
  <p key="2" v-if='!open1' @click='open1 = true'>Second Block</p>
</transition-group>
</div>

Upvotes: 1

Related Questions