在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中添加键,除了在小提琴中添加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/