vue动画右侧滑出层

向右看齐 2023-01-16 09:46 94阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="renderer" content="webkit">
    		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    		<meta name="flexible" content="initial-dpr=2" />
    		<meta name="viewport"
    			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<meta name="author" content="bright2017" />
    		<title>css动画</title>
    		<link rel="stylesheet" type="text/css" href="css/reset.css" />
    		<script src="js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
    		<style>
    			.search_page_list {
    				width: 100%;
    				position: relative;
    			}
    
    			.hidden_view {
    				width: 100%;
    				background: #000000;
    				opacity: 0.7;
    				position: fixed;
    				left: 0;
    				top: 0;
    				z-index: 9;
    			}
    
    			.click_animation {
    				text-align: center;
    				font-size: 20px;
    				padding: 100px 0;
    			}
    
    			.screen_cent {
    				width: 280px;
    				height: 600px;
    				position: absolute;
    				right: 0;
    				bottom: 0;
    				z-index: 9;
    				border-radius: 10px 0 0 10px;
    				overflow: hidden;
    			}
    
    			.screen_data {
    				width: 100%;
    				height: 100%;
    				background: #FFFFFF;
    			}
    			.show_view-enter {
    				animation: show_view-dialog-fade-in 1.5s ease;
    			}
    			
    			.show_view-leave {
    				animation: show_view-dialog-fade-out 1.5s ease forwards;
    			}
    			
    			.show_view-enter-active {
    				animation: show_view-dialog-fade-in 1.5s ease;
    			}
    			
    			.show_view-leave-active {
    				animation: show_view-dialog-fade-out 1.5s ease forwards;
    			}
    			
    			@keyframes show_view-dialog-fade-in {
    				0% {
    					transform: translateX(280px);
    				}
    			
    				100% {
    					transform: translateX(0);
    				}
    			}
    			
    			@keyframes show_view-dialog-fade-out {
    				0% {
    					transform: translateX(0);
    				}
    			
    				100% {
    					transform: translateX(280px);
    				}
    			}
    			
    		</style>
    	</head>
    	<body id="body">
    		<div class="search_page_list" id="app" :style="{height: win_height+'px'}">
    
    			<div class="click_animation" @click="screen_click">打开动画</div>
    
    			<div class="hidden_view" :style="{height: win_height+'px'}" v-show="show" @click="screen_hide_click"></div>
    			<transition name="show_view">
    				<div class="screen_cent" v-show="isshow">
    					<div class="screen_data" transiton="show_view"></div>
    				</div>
    			</transition>
    		</div>
    		<script type="text/javascript">
    			window.onload = function() {
    				// 初始化内容 
    				var app = new Vue({
    					el: '#app',
    					data: {
    						show: false,
    						isshow: false,
    						win_height: '',
    					},
    					mounted: function() {
    						// 生命周期  
    						this.win_height = window.innerHeight;
    					},
    					methods: {
    						screen_click() {
    							// 显示筛选
    							this.show = true;
    							this.isshow = true;
    						},
    						screen_hide_click() {
    							// 隐藏筛选
    							let that = this;
    							setTimeout(function() {
    								that.show = false;
    							}, 1500);
    							that.isshow = false;
    						}
    					}
    				});
    			}
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221022/1669fd428a234f088427d311d22297f9.png