时间戳

首页 > 解决方案 > Vue 过渡组的行为

vue.js - Vue 过渡组的行为

问题描述

我是 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 首先出现然后向上移动。无论如何让它出现在没有跳跃效果和过渡的地方？

提前致谢。

标签： vue.jsvuejs2

解决方案

transition-group在这种情况下，您不需要 a 。你还需要使用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>

推荐阅读