关于在vue中侧边栏隐藏显示动画总结
2017-08-02 本文已影响3035人
Peterius的致幻脸
在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
