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:
|
<<: Nginx Location directive URI matching rules detailed summary
>>: Example test MySQL enum type
Table of contents 1. Offline installation 2. Onli...
There are two ways to disable form submission in ...
Traceroute allows us to know the path that inform...
Preface Generally speaking, when we talk about Li...
1 Get the installation resource package mysql-8.0...
Demand background A statistical interface, the fr...
Preface MySQL officially refers to prepare, execu...
mistake The following error occurs when connectin...
Use the vscode editor to create a vue template, s...
When the DataSource property of a DataGrid control...
This tutorial is only applicable to Windows syste...
Preface Through my previous Tomcat series of arti...
Table of contents 1. Anonymous slots 2. Named slo...
1. System environment The system version after yu...
<br />When the page contains <img src=&qu...