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轉場動畫的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
