Плавно анимировать v-шоу в VueJS

Я пытался анимировать два divs, используя переход в Vuejs. Ниже приведен код (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
  }
});
6
vue-component vue.js vuejs2

3 ответов

вы должны добавить ключ в каждом из 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/

редактировать

чтобы сделать его более гладким, вы можете использовать Переход-Моды: 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/

13

Я бы определенно предложил использовать:https://github.com/asika32764/vue2-animate

отличный lib с AnimateCSS портирован на переходы VueJS. Я использую это с каждым проектом, и он отлично работает.

использовать его с v-show с одним элементом:

<transition name="fade" >
    <p v-if="show">hello</p>
</transition>
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 Если вы хотите увидеть, как обрабатываются переходы между элементами

1