CODEWITHSUNDEEP
javascriptmvvmvue.js
Migwell
Migwell

Reputation: 20127

VueJS transitions using v-view

I'm looking to animate the appearance of new elements and the disappearance of old elements when you change the component a v-view element is bound to. However because changing the ViewModel actually destroys the DOM element, this doesn't seem to work (the boxes are supposed to fade/shrink when they disappear):

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>

Is there any native VueJS method of making this animation work?

Upvotes: 1

Views: 2530

Answers (1)

koba04
koba04

Reputation: 981

It works when "v-transition" is used with "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>

Upvotes: 3

Related Questions