在 VueJS 中流畅地制作 v-show 动画

Question

我试图在 Vuejs 中使用转换为两个 div 设置动画。下面是我使用的代码（jsfiddle）。但不知道为什么它不起作用

https://jsfiddle.net/k6grqLh1/16/

vue

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-show="show">
        <div class="box yellow"></div>
      </div>
     </transition>
     <transition name="fade">
      <div v-show="!show">
        <div class="box blue"></div>
      </div>
      </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

.box {
  width:200px;height:200px;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}

js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true
  }
});

Answer 1

你必须在每个 div 中添加 key，除了在 fiddle 中添加 vue 2.x 之外，你还需要进行以下更改：

为什么来自docs

当在具有相同标签名称的元素之间切换时，您必须通过赋予它们唯一的键属性来告诉 Vue 它们是不同的元素。否则，Vue 的编译器只会为了效率而替换元素的内容。即使在技术上没有必要，在一个组件中始终键入多个项目也被认为是一种很好的做法。

HTML

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

工作小提琴：https://jsfiddle.net/k6grqLh1/21/

已编辑

为了更流畅，可以使用Transition-Modes:mode="out-in"，先让当前元素转出，完成后新元素转入。见以下代码：

<transition name="fade" mode="out-in">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

小提琴：https://jsfiddle.net/k6grqLh1/22/

Answer 2

首先..您正在导入 Vue 1。 如果你导入 Vue 2，这个 html 可以工作

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

如果您想了解如何处理元素之间的转换，您应该阅读文档https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements