【CSS】简记CSS效果:通过transition(动画过渡属性)实现侧边栏目滑入滑出

需求

在资金明细的页面中,点击按钮时筛选区域从左侧滑出,完成筛选点击确认后调用接口完成数据查询,筛选区域滑入左侧;

基于微信小程序页面实现

wxml代码

复制代码
<view>
  <!-- 操作按钮 -->
  <button type="primary" bindtap="tapOpenSidebar">打开侧边栏目</button>
  <!-- 侧边栏目 -->
  <view class="sidebar-container {{is_show_sidebar ? 'show-sidebar' : ''}}">
    <button type="warn" bindtap="tapCloseSidebar">关闭侧边栏目</button>
    <!-- 其他内容根据实际设计内容填充 -->
  </view>
</view>

wxss代码

复制代码
.sidebar-container {
  height: 100vh;
  background: #F5F5F5;
  box-sizing: border-box;
  box-shadow: 1px 0px 1px #D7D7D7;
  border-top-right-radius: 30rpx;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  /* 设置元素过渡规则 */ 
  transition: width 0.2s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
  /* 过渡前的初始属性 */
  width: 0;
  visibility: 0;
  opacity: 0;
}
/* 过渡完成的属性 */
.show-sidebar {
  opacity: 1;
  visibility: 1;
  width: 80%;
}

js代码

复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    is_show_sidebar: false, // 控制侧边栏滑动开关
  },

  /**
   * 打开侧边栏目
   */
  tapOpenSidebar() {
    this.setData({is_show_sidebar: true})
  },

  /**
   * 关闭侧边栏目
   */
  tapCloseSidebar() {
    this.setData({is_show_sidebar: false})
  }
})

实现效果

实现参考其他博主文档

https://www.cnblogs.com/yadiblogs/p/10145625.html

相关推荐
yi碗汤园16 分钟前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7271 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic1 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
小九今天不码代码1 小时前
【前端高级特效】使用 CSS 实现毛玻璃模糊背景效果(含完整源码讲解)
css3·毛玻璃效果·css滤镜·backdrop-filter·blur模糊·前端特效·css视觉效果
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年3 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
代码改变世界100863 小时前
像素策略游戏:资源战争
css·游戏·css3