为什么这种使用“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 that they are distinct elements by giving them unique key attributes (key='<uniqueKey>') to the tag elements, you can read about it here.

你可以查看这个working code sample.

但是，如果您仍然想要两个按钮来切换<div>，请选中 this code 代替。

此外，我强烈建议您阅读官方文档 Conditional Rendering with Vuejs。

为什么这种使用“v-if”切换元素的简单转换不起作用？

Why does this simple transition on toggling elements with `v-if` not work?

vuejs2

vue-transitions