在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