Почему этот простой переход при переключении элементов с помощью `v-if` не работает?

Question

Если я попробую очень простой пример с двумя <div>, только один из которых отображается одновременно с использованием v-if, то out-in переход между ними не затухает.

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="(box==='a')">a</div>
    <div v-if="(box==='b')">b</div>
  </transition>

  <button @click="box='a'">show a</button>
  <button @click="box='b'">show b</button>
</div>

И мой CSS-код для анимации:

.fade-enter-active, .fade-leave-active {
    transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

JSFiddle находится здесь: https://jsfiddle.net/3ckto1am/1/

Answer 1

Вы можете установить "div box" наbooleanзначение, а затем создайте метод, который переключаетboolean между true/false вот так:

Шаблон:

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="boxA" key="boxA">Div A</div>
    <div v-else key="boxB">Div B</div>
  </transition>

  <button @click="toggleBoxes">Toggle div boxes!</button>
</div>

JavaScript:

new Vue({
  el: "#app",
  data: {
    boxA: true
  },
  methods: {
    toggleBoxes() {
        this.boxA = !this.boxA;
    }
  }
})

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

Для <transition>, при переключении между элементами, имеющими одинаковое имя тега, вы должны сообщить Vue, что они являются разными элементами, задав им уникальные ключевые атрибуты (key='<uniqueKey>') к элементам тега, вы можете прочитать об этом здесь.

Вы можете проверить этот рабочий пример кода.

Однако, если вы по-прежнему хотите иметь две кнопки для переключения<div> вместо этого проверьте этот код.

Кроме того, я настоятельно рекомендую вам прочитать официальную документацию по условному рендерингу с помощью Vuejs.