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实现右侧滑出层动画 的全部内容, 来源链接: utcz.com/p/220150.html

回到顶部