vue——tab菜单项滑动切换
效果图:一开始的做法是将这个高亮绿色的部分作为选中项的左边框处理,但这样做切换时的视觉效果不好,现在修改以后更加美观。实现方法:将这个宽3px 高41px的小div设为绝对定位,动态改变它的位置,即top值具体代码:将侧边栏分为两个部分:滑块(左侧) + 菜单项(右侧),并为滑块动态绑定style将滑块设置为绝对定位position: absolute,初始位置在最上方top: 0; left:
·
效果图:
一开始的做法是将这个高亮绿色的部分作为选中项的左边框处理,但这样做切换时的视觉效果不好,现在修改以后更加美观。
实现方法:将这个宽3px 高41px的小
div
设为绝对定位,动态改变它的位置,即top
值
具体代码:
- 将侧边栏分为两个部分:滑块(左侧) + 菜单项(右侧),
并为滑块动态绑定style
- 将滑块设置为绝对定位
position: absolute
,初始位置在最上方top: 0; left: 0
,transition
设置过渡动画
- 当点击任一菜单项时,改变滑块的位置
更多推荐
已为社区贡献2条内容
所有评论(0)