Question

当您更改v-view元素绑定的组件时，我希望为新元素的外观和旧元素的消失设置动画。但是因为更改ViewModel实际上会破坏DOM元素，所以这似乎不起作用（当它们消失时，这些框应该淡出/缩小）：

＆＃13;

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>"
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

是否有任何使用此动画的原生VueJS方法？

Answer 1

当＆＃34; v-transition＆＃34;与＆＃34; v-view＆＃34;。

一起使用

＆＃13;

var vm = new Vue({
  el: "#container",
  data: {
    currentView: ""
  }
});

Vue.component("red", {
  template: "<div class='red'></div>"
});
Vue.component("blue", {
  template: "<div class='blue'></div>"
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

VueJS使用v-view进行转换

1 个答案: