模拟app页面出现消失动画效果-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的App风格页面切换动画，通过动画效果模拟App的页面从右侧滑入和滑出，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做这个是因为工作需要，老板要做一个app功能的演示，为了更贴切，页面的切换效果和app一样，从右边进入，从右边划出。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		[v-cloak]{
            display: none;
        }
		#app{
			width: 200px;
			height:200px;
			overflow: hidden;
			text-align: center;
			position: relative;
		}
		.home-page{
			width: 100%;
			height: 100%;
			background: green;
		}
		.page{
			width: 100%;
			height: 100%;
			background: #ccc;
		}
		.in{
			position: absolute;
			top: 0; 
	 		left: 0;
		}
		.out{
			position: absolute;
			top: 0; 
	 		left: 100%;
		}
		.show{
			position: absolute;
			top: 0; 
	 		left: 0;
			animation:mymove 0.5s;
            -webkit-animation:mymove 0.5s; /*Safari and Chrome*/
		}
		@keyframes mymove
		{
			from {left:100%;}
			to {left:0;}
		}

		@-webkit-keyframes mymove /*Safari and Chrome*/
		{
			from {left:100%;}
			to {left:0;}
		}
		.hide{
			
			position: absolute;
			top: 0; 
	 		left: 100%;
			animation:myleave 0.5s;
            -webkit-animation:myleave 0.5s; /*Safari and Chrome*/
		}
		
		@keyframes myleave
		{
			from {left:0;}
			to {left:100%;}
		}

		@-webkit-keyframes myleave /*Safari and Chrome*/
		{
			from {left:0;}
			to {left:100%;}
		}
	</style>
</head>
<body >
	<div id="app" v-cloak>
		<div class="home-page" id="0">
			<button @click="nextPage(1)">下一页</button>
		</div>
		<div class="page" :class="myclass" id="1">
			<span>11111</span>
			<button @click="nextPage(2)">下一页</button>
			<button @click="lastPage(1)">上一页</button>
		</div>
		<div class="page" id="2">
			<span>22222</span>
			<button @click="nextPage(3)">下一页</button>
			<button @click="lastPage(2)">上一页</button>
		</div>
		<div class="page" id="3">
			<span>33333</span>
			<button @click="nextPage(4)">下一页</button>
			<button @click="lastPage(3)">上一页</button>
		</div>
		<div class="page" id="4">
			<span>44444</span>
			<button @click="nextPage(5)">下一页</button>
			<button @click="lastPage(4)">上一页</button>
		</div>
		<div class="home-page" id="5">
			<button @click="lastPage(5)">上一页</button>
		</div>
	</div>
	
	<script src="../js/lib/vue-2.26.min.js"></script>
    <script src="../js/lib/jquery.min.v2.1.4.js"></script>
    <script>
    	var app = new Vue({
		    el:"#app",
		    data:{
		        pageShow:0,
		        myclass:""

		    },
		    created:function () {
		        
		    },
		    computed:{
		    	myclass:function(){

		    	}
		    },
		    mounted:function () {

		    },
		    methods: {
		    	nextPage:function(index){
		    		$("#"+index).removeClass("out hide").addClass("in show");

		    	},
		    	lastPage:function(index){
					$("#"+index).removeClass("in show").addClass("out hide");
		    	}
		        
		    }
		    
		});
    </script>
</body>
</html>
复制代码