vue实现右侧滑出层动画

193 阅读 0 评论 128 点赞

我是靠谱客的博主平常香水，这篇文章主要介绍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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>