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

Question

我试图在 Vuejs 中使用过渡为两个 div 设置动画。下面是我使用过的代码 (jsfiddle)。但是不知道为什么不行

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

首先..您正在导入 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

Answer 2

除了在fiddle中添加vue2.x外，还需要在div中的每一个中添加key，还需要进行以下更改：

为什么 来自 docs

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.

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>

工作fiddle：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>

Fiddle: https://jsfiddle.net/k6grqLh1/22/

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

Smoothly animate v-show in VueJS

vue.js

vue-component

vuejs2

已编辑