uni-app 页面跳转动画

API的方式

javascript 复制代码
uni.navigateTo({
	url: '../test/test',
	animationType: 'pop-in',
	animationDuration: 200
});
uni.navigateBack({
	delta: 1,
	animationType: 'pop-out',
	animationDuration: 200
});

pages.json中配置的方式

java 复制代码
"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}

pages.json 中配置的是窗口显示的动画

显示动画与关闭动画,会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型,则不会使用默认的类型。

显示动画 关闭动画 显示动画描述(关闭动画与之相反)
slide-in-right slide-out-right 新窗体从右侧进入
slide-in-left slide-out-left 新窗体从左侧进入
slide-in-top slide-out-top 新窗体从顶部进入
slide-in-bottom slide-out-bottom 新窗体从底部进入
pop-in pop-out 新窗体从左侧进入,且老窗体被挤压而出
fade-in fade-out 新窗体从透明到不透明逐渐显示
zoom-out zoom-in 新窗体从小到大缩放显示
zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
none none 无动画
相关推荐
前端小巷子几秒前
Promise 链式调用:让异步编程更优雅
前端·面试·promise
周日不上发条1 分钟前
前端必学:CSS实现精美渐变色票据组件(含完整源码)
前端
有梦想的攻城狮7 分钟前
从0开始学vue:pnpm怎么安装
前端·javascript·vue.js
pzpcxy52010 分钟前
安装VUE客户端@vue/cli报错警告npm WARN deprecated解决方法 无法将“vue”项识别为 cmdlet、函数
前端·vue.js·npm
醉书生ꦿ℘゜এ10 分钟前
npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
疯狂的沙粒25 分钟前
uni-app 如何实现选择和上传非图像、视频文件?
前端·javascript·uni-app
^Rocky27 分钟前
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
uni-app·腾讯云·媒体
娃哈哈哈哈呀27 分钟前
html-pre标签
java·前端·html
$程28 分钟前
Uniapp 二维码生成与解析完整教程
前端·uni-app
Java永无止境29 分钟前
Web前端基础:HTML-CSS
java·前端·css·html·javaweb