Dynamic Transitions

by Saurabh Mimani

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="vue-instance">
  <div>
    <transition :name="transitionType" mode="out-in">
      <div key="3" v-if="show">
        <div class="box yellow"></div>
      </div>
      <div key="1" v-if="!show">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Transition</a>
    <br>
    <a href="#" @click="changeTransition">Change Transition Type</a>
    <br>
    Current Transition Type: {{transitionType}}
  </div>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active in <2.1.8 */

{
  opacity: 0;
}

.trans2-enter-active,
.trans2-leave-active {
  transition: all 1s;
}

.trans2-enter,
.trans2-leave-to
/* .fade-leave-active in <2.1.8 */
{
  margin-left: 30px;
}

.box {
  width: 200px;
  height: 200px;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true,
    transitionType: "fade"
  },
  methods: {
     changeTransition(){
       if(this.transitionType === "fade"){
          this.transitionType = "trans2"
       }
       else {
          this.transitionType = "fade"
       }  
     }
  }
});