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的链接为this

问题是第二个div首先出现，然后向上移动。无论如何，有没有使它出现在第一个位置而没有跳跃效果和过渡的功能？

谢谢。

Answer 1

在这种情况下，您不需要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>

Answer 2

将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>

Vue过渡组的行为

2 个答案: