vue页面切换过渡transition效果

来源：懂视网责编：小采时间：2020-11-27 22:06:34

vue页面切换过渡transition效果

vue页面切换过渡transition效果:首先得有你想要的过渡效果css代码： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms

推荐度：

点击下载本文 文档为doc格式

导读vue页面切换过渡transition效果:首先得有你想要的过渡效果css代码： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms

首先得有你想要的过渡效果css代码：

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
 will-change: transform;
 transition: all 500ms;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
}
.vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

给你想要过渡页面的父元素给上这样的样式：

.router-view{
 width: 100%;
 position: absolute;
 -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
 -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
 -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
 -o-transition: all .3s cubic-bezier(.55,0,.1,1);
 transition: all .3s cubic-bezier(.55,0,.1,1);
 height:100%;
 }

html代码是这样的：

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

js代码是这样的：

export default {
 name: 'app',
 data(){
 return {
 transitionName:'vux-pop-in'
 }
 },
 }

这里的transitionName根据自己的需要去改变，我是监听路由去改变是vux-pop-in还是vux-pop-out的。

watch:{
 $route(to, from) {
 if(to.meta.index > from.meta.index){
 this.transitionName = 'vux-pop-in';
 }else{
 this.transitionName = 'vux-pop-out';
 }
 }
 }

这里当然要个路由这是参数index，分级。

总结

以上所述是小编给大家介绍的vue页面切换过渡transition效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

vue页面切换过渡transition效果

推荐度：

点击下载本文 文档为doc格式

标签： VUE 过渡效果过渡

热门焦点

vue页面切换过渡transition效果

vue页面切换过渡transition效果

vue页面切换过渡transition效果

最新推荐

猜你喜欢

热门推荐