【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

相关推荐
liangshanbo12154 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
木易 士心5 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
软件技术员6 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
Q_Q5110082857 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放