没有合适的资源?快使用搜索试试~ 我知道了~
vue页面切换过渡transition效果
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
3 下载量 115 浏览量
2020-10-17
22:05:32
上传
评论
收藏 34KB PDF 举报
温馨提示
试读
2页
主要介绍了vue页面切换过渡transition效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
资源推荐
资源详情
资源评论
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;
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';
}
资源评论
weixin_38499336
- 粉丝: 8
- 资源: 953
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- date0425111111111111111111111
- 包含贪心算法的定义及python代码部分实现
- 自动驾驶-状态估计和定位之扩展卡尔曼滤波.pdf
- csdn之x-ca-key,x-ca-nonce,x-ca-signature与x-ca-signature-headers探索
- 基于TM1620数码显示芯片STM32单片机驱动程序软件源代码.zip
- 【tomcat6使用redis配置session共享】
- 包含杨辉三角的说明及java代码实现
- FDN371N-NL-VB一款SOT23封装N-Channel场效应MOS管
- AutomotiveSPICE-V4.0 中文版
- Java实现杨辉三角的生成和打印代码示例.md
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功