关于在vue中侧边栏隐藏显示动画总结

在vue中 往往会有侧边栏点击显示和隐藏的动画效果,总结了一种实现方式。

参考布局

截图

        代码中的布局方式


  当点击按钮是 class 进行切换,sidbar-wrapper  向左移动负值(比如侧边栏宽度200px,移动-160px,剩下的40px是要显示图标的宽度),并设置 overflow hidden,这个时候移动子div sidebar-container  想右移动比如 155px ,刚好将图标显示到合理位置。main-wrapper  margin-left 上面的40px 。


基本思路就是这样。主要使用css3  transform: translate(-160px,0);     transition: all.28sease-out; 这两个特性

但凡界面元素发生变化都可以添加  transition

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 笔记参考自《响应式Web设计:HTML5和CSS3实践》,2013年出版内容说不上最新。如下是全书的章的目录:第 ...
    于晓鱼阅读 4,544评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 47,041评论 22 665
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,719评论 32 459
  • 今天我们来学习一种行为型模式,状态模式(State Pattern)。 模式定义 允许一个对象在其内部状态改变时改...
    HJXANDHMR阅读 9,968评论 5 12

友情链接更多精彩内容