Vue implements the right slide-out layer animation

This article example shares the specific code of Vue to implement the right slide-out layer animation for your reference. The specific content is as follows

Effect picture:

Code:

<!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 animation</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">Open animation</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() {
    // Initialize content var app = new Vue({
     el: '#app',
     data: {
      show: false,
      isshow: false,
      win_height: '',
     },
     mounted: function() {
      // Life cycle this.win_height = window.innerHeight;
     },
     methods: {
      screen_click() {
       // Display filter this.show = true;
       this.isshow = true;
      },
      screen_hide_click() {
       // Hide filter let that = this;
       setTimeout(function() {
        that.show = false;
       }, 1500);
       that.isshow = false;
      }
     }
    });
   }
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue+swiper implements the test question function of sliding left and right
Vue uses swiper to switch pictures by sliding left and right
Vue uses better-scroll to achieve sliding and left-right linkage
Vue implements left and right linkage sliding pages based on better-scroll
Detailed explanation of left and right sliding events on Vue mobile terminal
Vue mobile terminal realizes the mobile phone sliding left and right entry animation
Vue mobile terminal slide the screen right to return to the previous page with source code download
How to realize left and right sliding effect on mobile terminal in Vue
Example of left and right sliding effects when switching Vue routes
Implementing left and right sliding effect of page switching based on Vue

<<: Nginx Location directive URI matching rules detailed summary

>>: Example test MySQL enum type