vue实现右侧滑出层动画
更新时间：2021年04月27日 09:21:12 作者：Bright2017
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统，这个博客使用Vue做前端框架，Node+express做后端，数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能，需要的朋友可以参考学习。2017-04-04
今天小编就为大家分享一篇Element UI 自定义正则表达式验证方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
嵌套路由顾名思义就是路由的多层嵌套,这篇文章主要给大家介绍了关于Vue实现路由嵌套的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue中的数据监听和数据交互案例解析,在文章开头部分先给大家介绍了vue中的数据监听事件$watch，具体代码讲解，大家可以参考下本文2017-07-07
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
这篇文章主要介绍了SpringBoot+Vue开发之Login校验规则、实现登录和重置事件,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能,下面这篇文章主要给大家介绍了关于基于Vue实现文件上传的几种实现方式,需要的朋友可以参考下2024-03-03
本文主要介绍了element el-tree折叠收缩的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue列表渲染(v-for的使用),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论