使用 v-view 的 VueJS 转换答案

【问题标题】：VueJS transitions using v-view使用 v-view 的 VueJS 转换
【发布时间】：2014-10-01 08:26:12
【问题描述】：

当您更改绑定到 v-view 元素的组件时，我希望为新元素的外观和旧元素的消失设置动画。但是因为更改 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>

是否有任何原生 VueJS 方法可以使这个动画工作？

【问题讨论】：

标签： javascript mvvm vue.js

【解决方案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>

【讨论】：