vue实现右侧滑出层动画
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了vue实现右侧滑出层动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现右侧滑出层动画的具体代码，供大家参考，具体内容如下
效果图：
代码：
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：jquery实现时间选择器
下一篇：JavaScript类型检测的方法实例教程