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

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

1 голос
/ 01 октября 2019

Если я попробую очень простой пример с двумя <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/

1 Ответ

0 голосов
/ 01 октября 2019

Вы можете установить "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 .

...