Поведение Vue Transition-group

Question

Я новичок в переходе в Vue. Я пытаюсь скрыть и показать div зависит от состояния. Может кто-нибудь сказать мне, если это желаемое поведение?

<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
     }
  }
})

Ссылка для JSfiddle: , это

.

Проблема в том, что второй div сначала появляется, а затем движется вверх. Есть ли способ заставить его появиться на месте первого без эффекта прыжка и с переходом?

Заранее спасибо.

Answer 1

Разделите ваш переход на leave и enter отдельно и сохраните leave как 0s, чтобы не уходить.

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>

Answer 2

Вам не нужно transition-group в этом случае. Также вам нужно использовать mode="out-in"

Ссылка: https://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>