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 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

vue实现右侧滑出层动画

请登录后发表评论