uniapp微信小程序设置开屏启动动画效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序设置开屏启动动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序开屏动画,uni-app,微信小程序,小程序

效果预览

使用uniapp搭建的微信小程序，制作小程序启动开屏动画，主要使用css动画属性。主页代码过多这里就展示重要代码片段。

开屏动画代码
<view v-if="showTransition" :style="{ background: color }" class="card"
			:class="{ active: transitionCompleted }">
			一起听歌Pro
</view>
动画执行完成显示的代码
<view v-else class="pages" :style="{ background: color }">
</view>

js代码

data() {
			return {
				transitionCompleted: false,
				showTransition :true,//
                color:linear-gradient(to top, #fff, #F9F871),
			}
		},
mounted() {
			setTimeout(() => {
				this.transitionCompleted = true;
				setTimeout(() => {
					this.showTransition = false;
				}, 0); // 调整显示过渡页面的时间
			}, 2000); // 调整动画执行的时间
		},

css代码文章来源地址https://www.toymoban.com/news/detail-772242.html

.card {
		position: relative;
		width: 100%;
		height: 100vh;
		background: mediumturquoise;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: bold;
		border-radius: 15px;
		cursor: pointer;
	}

	.card::before,
	.card::after {
		position: absolute;
		content: "";
		width: 20%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: bold;
		background-color: #fff;
		transition: all 2s;
	}

	.card::before {
		top: 0;
		right: 0;
		border-radius: 0 15px 0 100%;
	}

	.card::after {
		bottom: 0;
		left: 0;
		border-radius: 0 100% 0 15px;
	}

	.card::before,
	.card::after {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		animation: expand 2s;
	}

	@keyframes expand {
		0% {
			width: 10%;
			height: 10%;
			border-radius: 15px;
		}

		/*  25% {
	    width: 20%;
	    height: 20%;
	    border-radius: 15px;
	  } */
		100% {
			width: 100%;
			height: 100%;
			border-radius: 15px;
		}
	}

	.card:after {
		content: "欢迎进入";
	}

到了这里，关于uniapp微信小程序设置开屏启动动画效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！