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 2.x之外，你必须在每个div中添加键，你需要进行以下更改：

来自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

我肯定建议使用：https://github.com/asika32764/vue2-animate

使用AnimateCSS移植到VueJS转换的优秀库。我在每个项目中使用它并且它完美地工作。

与单元素的v-show一起使用：

<transition name="fade" >
    <p v-if="show">hello</p>
</transition>

Answer 3

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

在VueJS中平滑地制作v-show动画

3 个答案:

被修改