VUE页面切换加过渡效果

vue版本2.5.2;
vue-router版本:3.0.1

然后直接上代码:

<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view class="child-view"/>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'App',
    data () {
        return {
            transitionName : '',
            routerList : ['']
        }
    },
    watch: {
        '$route' (to, from) {
            //判断左右展示动画
            const _self = this;
            const toPath = to.path.substr(1);
            if(_self.routerList.indexOf(toPath) == -1){
                _self.routerList.push(toPath);
                _self.transitionName = 'slide-left';
            }else{
                _self.transitionName = 'slide-right';
                if(_self.routerList.length != 1){
                    _self.routerList.pop();
                }
            }
        }
    }
}
</script>

<style>
.child-view {
    position: absolute;
    width:100%;
    transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100px, 0);
    transform: translate(-100px, 0);
}
</style>

感谢看完指鹤文章,希望指鹤的文章对您有所帮助。

闲暇时,指鹤喜欢写一些文章,部分发表在了豆瓣,若是您对此感兴趣,您可以点击下面连接支持下指鹤,指鹤在此表示感谢了

绝命笔记 一封匿名信引发的追寻 迷案追凶 量子危机