本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vue+swiper实现左右滑动的测试题功能
- vue使用swiper实现左右滑动切换图片
- vue使用better-scroll实现滑动以及左右联动
- vue基于better-scroll实现左右联动滑动页面
- vue移动端的左右滑动事件详解
- vue移动端实现手机左右滑动入场动画
- Vue移动端右滑屏幕返回上一页附源码下载
- Vue实现移动端左右滑动效果的方法
- Vue路由切换时的左滑和右滑效果示例
- 基于Vue实现页面切换左右滑动效果
本文由 华域联盟 原创撰写:华域联盟 » vue实现右侧滑出层动画
转载请保留出处和原文链接:https://www.cnhackhy.com/61152.htm