javascript - 使用 v-view 的 VueJS 转换

Question

当您更改 v-view 元素绑定(bind)到的组件时，我希望为新元素的外观和旧元素的消失设置动画。但是，因为更改 ViewModel 实际上会破坏 DOM 元素，所以这似乎不起作用(盒子在消失时应该会褪色/收缩):

var vm = new Vue({
  el: "#container",
  data: {
    currentView: ""
  }
});

Vue.component("red", {
  template: "<div class='red box' v-transition></div>"
});
Vue.component("blue", {
  template: "<div class='blue box' v-transition></div>"
});

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.box {
  transition: all 3s ease;
  height: 200px;
  width: 200px;
  opacity: 1;
}
.box.v-enter,
.box.v-leave {
  height: 0;
  width: 0;
  opacity: 0;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"></script>
<div id="container">
  <button v-on="click: currentView = 'red'">Red</button>
  <button v-on="click: currentView = 'blue'">Blue</button>
  <div v-view="currentView"></div>
</div>

是否有任何 native VueJS 方法可以使此动画正常工作？

Answer 1

当“v-transition”与“v-view”一起使用时有效。

var vm = new Vue({
  el: "#container",
  data: {
    currentView: ""
  }
});

Vue.component("red", {
  template: "<div class='red'></div>"
});
Vue.component("blue", {
  template: "<div class='blue'></div>"
});

.red {
  background-color: red;
  height: 200px;
}
.blue {
  background-color: blue;
  height: 200px;
}
.box {
  transition: all 3s ease;
  height: 200px;
  width: 200px;
  opacity: 1;
}
.box.v-enter,
.box.v-leave {
  height: 0;
  width: 0;
  opacity: 0;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"></script>
<div id="container">
  <button v-on="click: currentView = 'red'">Red</button>
  <button v-on="click: currentView = 'blue'">Blue</button>
  <div v-view="currentView" class="box" v-transition></div>
</div>