vue实现右侧划入

Html

点击触发的html
<div @click="silderMask"></div>
滑动层中的html
<transition name="slide-fade">
    <div v-show="isShow"></div>
</transition>

Css

.slide-fade-enter,.slide-fade-leave-to { 
    transform: translateX(100%); -webkit-transform: translateX(100%); 
}
.slide-fade-enter-active,.slide-fade-leave-active { 
    will-change: transform; transition: all 0.3s ease;
}

Js

var vm = new Vue({
   data:{
       isSubordinate: false,
       isBoss: false
   },
   mounted:function(){
   },
   methods: {
       silderMask: function () {
           this.isShow = true
       }
   }}).$mount('#nev');