Vue+WebPack+HBuilder 項目記錄

項目搭建完畢了，但是由于是單頁應用嵌入HBuilder的時候無法利用它的轉場動畫，于是找到了vue的轉場動畫寫法，使體驗與APP靠近，在此記錄；

1.首先我們要監聽路由然后判斷其是前進還是后退，來實現不同的動畫

export default { name: 'app', data () {  return {  transitionName: 'slide-left'  } }, watch: { '$route' (to, from) {  const toDepth = to.path.split('/').length  const fromDepth = from.path.split('/').length  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }}

2.template

<transition :name="transitionName"> <router-view class="child-view"></router-view></transition>

3.css;修改css得到不同的效果。

 .child-view { position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  -moz-box-sizing: border-box;    box-sizing: border-box; transition: all .6s cubic-bezier(.55,0,.1,1);}.slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0);}.slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0);}

上面動畫可作為不同級頁面的轉場動畫，下面可作為同級頁面轉場動畫，無需監聽路由

1.template

<transition name="slide-fade"> <router-view></router-view></transition>

2.css

.slide-fade-enter-active { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease;}.slide-fade-leave-active { transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease;}.slide-fade-enter{ transform: translateX(20px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); opacity: 0;}.slide-fade-leave-active { opacity: 0;}

以上這篇vue+vue-router轉場動畫的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。