CSS实现移动端侧滑

最新推荐文章于 2022-06-16 21:59:09 发布
最新推荐文章于 2022-06-16 21:59:09 发布
阅读量1k 收藏 1
点赞数
分类专栏： css 文章标签： css 侧滑
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>app-menu</title>  
  5.     <style type="text/css">  
  6.         .menu {  
  7.             position: fixed;  
  8.             left: 0;  
  9.             top: 0;  
  10.             width: 100%;  
  11.             height: 100%;  
  12.             overflow: hidden;  
  13.             pointer-events: none;  
  14.             z-index: 150;  
  15.         }  
  16.         .menu--visible {  
  17.             pointer-events: auto;  
  18.         }  
  19.         .app-menu {  
  20.             background-color: #fff;  
  21.             color: #fff;  
  22.             position: relative;  
  23.             /*max-width: 400px;*/  
  24.             width: 80%;  
  25.             height: 100%;  
  26.             background-color: #ddd;  
  27.             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);  
  28.             -webkit-transform: translateX(-103%);  
  29.                     transform: translateX(-103%);  
  30.             display: flex;  
  31.             flex-direction: column;  
  32.             will-change: transform;  
  33.             z-index: 160;  
  34.             pointer-events: auto;  
  35.   
  36.             transition: all 0.5s ease-in;  
  37.             transition: all 0.4s ease-out;              
  38.         }  
  39.         .menu--visible .app-menu {  
  40.             -webkit-transform: none;  
  41.                     transform: none;  
  42.         }  
  43.         .menu:after {  
  44.             content: '';  
  45.             display: block;  
  46.             position: absolute;  
  47.             left: 0;  
  48.             top: 0;  
  49.             width: 100%;  
  50.             height: 100%;  
  51.             background: rgba(0,0,0,0.4);  
  52.             opacity: 0;  
  53.             will-change: opacity;  
  54.             pointer-events: none;  
  55.             transition: opacity 1s cubic-bezier(0,0,0.3,1);  
  56.         }  
  57.         .menu--visible.menu:after {  
  58.             opacity: 1;  
  59.             pointer-events: auto;  
  60.         }  
  61.         /* aux */  
  62.         body {  
  63.           margin: 0;  
  64.         }  
  65.         .layout {  
  66.           width: 100%;  
  67.         }  
  68.         .header {  
  69.           background-color: #ccc;  
  70.         }  
  71.         .menu-icon {  
  72.           background-color: #b34848;  
  73.           width: 100px;  
  74.           height: 100px;  
  75.         }  
  76.     </style>  
  77. </head>  
  78. <body>  
  79. <div class="menu">  
  80.     <div class="app-menu"></div>  
  81. </div>  
  82. <div class="layout">  
  83.     <div class="header">  
  84.         <div class="menu-icon"></div>  
  85.     </div>  
  86. </div>  
  87. </body>  
  88. <script src="http://webpic.my4399.com/o2o/js/jquery-2.1.4.min.js"></script>  
  89. <script type="text/javascript">  
  90.     function toggleClassMenu() {    
  91.         if(!myMenu.classList.contains("menu--visible")) {         
  92.             myMenu.classList.add("menu--visible");  
  93.         } else {  
  94.             myMenu.classList.remove('menu--visible');         
  95.         }     
  96.     }  
  97.   
  98.   
  99.     var myMenu = document.querySelector(".menu");  
  100.     var oppMenu = document.querySelector(".menu-icon");  
  101.     oppMenu.addEventListener("click", toggleClassMenu, false);  
  102.     myMenu.addEventListener("click", toggleClassMenu, false);  
  103. </script>  
  104. </html>  


参考网站：http://www.zcfy.cc/article/smooth-as-butter-achieving-60-fps-animations-with-css3-1054.html

廿四桥明月夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端侧滑删除效果
05-19
总的来说，移动端侧滑删除效果的实现涉及了触摸事件处理、动画效果、数据操作和兼容性等多个方面。掌握这一技巧能提高移动端应用的交互性和易用性，使得用户在浏览和管理信息时更加便捷。通过实践和调试，开发者可以...
一行css实现页面平滑滚动
自己的小书库
07-19 994
还在使用js？不如试一下scroll-behavior。
vue移动端时弹出侧边抽屉菜单
06-16 1703
移动端时弹出抽屉，如下： 控制抽屉显隐： 由于上面使用了hidden-sm-and-up样式，该样式需要在main.js中引入display.css，如下： 更多样式参考：elementUI响应式隐藏元素_~疆的博客-CSDN博客_element ui 隐藏元素main.js中引入使用类名https://blog.csdn.net/qq_40323256/article/details/125178963由于还使用了perfect-scrollbar组件，故还需要下载该组件，参考
移动端.自定义抽屉,蒙层弹出禁止滑动
qq_35715551的博客
08-31 195
希望可以帮到有需要的小伙伴们,效果图: 代码 html <!-- 抽屉 begin --> <view class="drawer"> <view class="background" v-if="open" @touchmove.stop> <view class="left" @click.self="closeDrawer"></view> <view class="drop" :class="{ acti..
html滑动过渡效果,Vue Tab切换滑动过渡效果,APP侧滑效果
weixin_35974217的博客
06-03 152
App.vue`.........export default{data(){return{transitionName:'left'}},watch:{'$route' (to, from) {if(toIdx < 10 && fromIdx < 10){this.transitionName = ''}else if(toIdx > 10) {this.tra...
移动端页面切换效果（基于动画transform）
chen__cheng的博客
05-07 920
效果一览： 实现代码： html <main> <div id="home"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div id="video"> <i class="fa fa-vimeo" aria-hidden="true"></i> </div> &
前端-移动端-模拟手机侧滑删除
最新发布
12-23
目前很多H5框架都有类似QQ、微信消息侧滑删除的功能。如果工程并没有提供侧滑功能的时候该如何是好？。。。。得来全不费功夫，特此花费些时间编写的侧滑插件，希望能够帮助前端...使用CSS3 过度或者动画设置体验友好度
原生html5移动端网页侧滑栏滑动效果
06-04
在实现侧滑栏效果时，我们并不需要过多依赖JavaScript库或框架，原生的CSS3和JavaScript就能完成大部分工作。 1. HTML 结构： 一个基本的侧滑栏结构可能包含两部分：主内容区域（content）和侧滑栏（sidebar）。...
侧滑导航适用于pc端与移动端
11-20
实现侧滑导航的核心技术包括CSS3的transform、transition和position属性，以及JavaScript事件监听和动画处理。通过这些技术，开发者可以控制菜单元素的位置变化和过渡效果，以实现平滑的滑动动画。在响应式设计中，...
微信小程序侧滑实现
10-12
微信小程序中，我们可以通过CSS3的`transform`属性来实现滑动效果。特别是在`wx-swiper`组件中，我们可以设置`swipe`事件，结合`transition`或`animation`属性，为元素添加滑动动画，实现简单的侧滑效果。同时，...
手机移动端左侧滑动菜单.zip
07-04
手机移动端左侧滑动菜单基于jquery-2.1.1.min.js和slideout.min.js制作，点击按钮网页左侧滑动显示导航菜单，适用于手机移动端使用。
移动端触屏滑动导航菜单
09-15
移动端触屏滑动导航菜单
FLex 左右滑动图片墙
04-10
实例中展示了Flex中图片左右滑动的代码
vue移动端侧滑面板组件
weixin_34127717的博客
04-15 1585
以下这段都是废话，请跳过 公司移动端开发平台进行了大变革，前端架构由DCloud大生态转换为VUE，所以移动端的UI组件库从MUI改为使用MintUI，然后开始大刀阔斧的把MintUI组件改成MUI组件的样子，然后发现少了几个较为常用的，其中一个就是，嗯，侧滑面板（也叫侧滑菜单，也叫抽屉面板-andriod官方是这么翻译的，很形象）。但是...
移动web最简洁的滑动效果Swipe JS（适合初学者）
热门推荐
xiongxianhe的专栏
10-11 11万+
之前一直都是后台开发，最近要做一个前台相关的项目，
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
weixin_29137489的博客
01-15 814
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息...
监听鼠标侧滑(适应移动端)
Chou_Junn的博客
02-08 343
@跃焱邵隼 代码: function ysSlideDir(data) { function f(eventName1,eventName2){ if(eventName1=='touchstart'||eventName2=='touchmove'){ if(data.preventDefault==true){ ...
H5侧拉菜单（MUI框架）
xuhonggui的博客
10-18 2000
源码地址：https://coding.net/u/xuhonggui/p/leftSliderMenu/git
html,css实现移动端商城首页
10-26
要实现一个移动端商城首页，可以使用HTML和CSS来进行布局和样式的设计。 ... 然后，使用CSS来为页面...总之，通过合理运用HTML和CSS可以实现移动端商城首页的布局和样式设计，从而提供给用户一个美观、易用的购物体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值