VueJS transitions using v-view

Question

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?

koba04 · Accepted Answer · 2014-10-02 01:38:45Z

3

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>

answered Oct 2, 2014 at 1:38

koba04

9818 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS transitions using v-view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related