实现点击开屏效果，类似于上下方向的开关门，

sunly_

已于 2023-09-22 15:43:38 修改

阅读量237

点赞数

分类专栏： uniapp css 文章标签：前端 javascript 开发语言

于 2023-09-22 15:41:58 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/133173387

版权

uniapp 同时被 2 个专栏收录

103 篇文章 68 订阅

订阅专栏

css

25 篇文章 1 订阅

订阅专栏

文章介绍了如何使用Vue.js和CSS实现页面加载时的开屏动画效果，当用户点击图片时，顶部和底部图片会相应地向上或向下收起。同时，通过JavaScript方法控制动画的显示和隐藏以及TabBar的切换。

摘要由CSDN通过智能技术生成

开屏动画效果：
进入页面后 openShow组件会完全遮挡内容区域，当点击中间的图片后，实现顶部图片向上收起，底部图片向下收起的效果。

<template>
	<view class="index">
		<view class="content">
			<!-- 首页内容-->
		</view>
		
		<!-- 开屏动画覆盖在首页内容上方 -->
		<view class="openShow" v-if="openShow">
			<view class="image top_img" :class="{ 'expanded1': openImgShow }"></view>
			<image src="../../static/img/3.png" mode="" class="open" @click="open" v-if="!openImgShow"></image>
			<view class="image bom_img" :class="{ 'expanded2': openImgShow }"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openShow:true,
				openImgShow: false,
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tabbar
		},
		methods: {
			open(){
				this.openImgShow = !this.openImgShow;
				setTimeout(()=>{
					uni.showTabBar(); //显示tabbar
					this.openShow = false
				},1000)
			}
		}
	}
</script>
<style scoped lang="scss">
	// 开屏动画
	.openShow {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100vh;
		z-index: 99;
		overflow: hidden;
		.open{
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 99;
			width: 400rpx;
			height: 400rpx;
			margin-left: -200rpx;
			margin-top: -200rpx;
		}
		.image {
			position: absolute;
			width: 710rpx;
			height: 50%;
			transition: all 1s;
			left: 20rpx;
		}
		
		.top_img {
			width: 710rpx;
			top: 0;
			background-image: url('../../static/img/1.png');
			background-size: cover;
		}
		
		.bom_img {
			width: 710rpx;
			bottom: 0;
			background-image: url('../../static/img/2.png');
			background-size:cover;
		}
		
		.expanded1 {
			transform: translateY(-100%);
		}
		
		.expanded2 {
			transform: translateY(100%);
		}
	}
</style>