为什么用 `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来告诉Vue它们是不同的元素strong>独特的关键属性（key='<uniqueKey>'）到标签元素，你可以阅读它here。

你可以查看这个working code sample。

但是，如果您仍然希望有两个按钮来切换<div>，请改为选择this code。

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