Vue implements the right slide-out layer animation

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

Recommend

Docker-compose installation yml file configuration method

Table of contents 1. Offline installation 2. Onli...

Introduction to html form control disabled attributes readonly VS disabled

There are two ways to disable form submission in ...

Linux traceroute command usage detailed explanation

Traceroute allows us to know the path that inform...

Customization Method of Linux Peripheral File System

Preface Generally speaking, when we talk about Li...

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)

1 Get the installation resource package mysql-8.0...

MySQL query data by hour, fill in 0 if there is no data

Demand background A statistical interface, the fr...

Tutorial on using prepare, execute and deallocate statements in MySQL

Preface MySQL officially refers to prepare, execu...

Navicat connects to MySQL8.0.11 and an error 2059 occurs

mistake The following error occurs when connectin...

Implementation of vscode custom vue template

Use the vscode editor to create a vue template, s...

12 Javascript table controls (DataGrid) are sorted out

When the DataSource property of a DataGrid control...

Installing MySQL 8.0.12 based on Windows

This tutorial is only applicable to Windows syste...

Detailed explanation of how Tomcat implements asynchronous Servlet

Preface Through my previous Tomcat series of arti...

Detailed explanation of anonymous slots and named slots in Vue

Table of contents 1. Anonymous slots 2. Named slo...

Centos7 mysql database installation and configuration tutorial

1. System environment The system version after yu...

Double loading issue when the page contains img src

<br />When the page contains <img src=&qu...