- 做tabs切换时,使用v-show切换太过于生硬,思考添加位移过渡动画,如果使用vue的transition就太过复杂,
- 于是就想到了使用计算属性,通过点击事件改变横线的偏移量就可以完美实现效果。
- 首先确定在tabs下面写一个横线
- 这就是两个标签,和底部横线的静态效果
- 然后给底部横线设置一个动态style属性,先取名为transform,这个值在计算属性中返回
使用es6模板字符串的写法就可以返回一个行内样式,通过变量movek控制这个横线的偏移量
在点击事件中给move赋值,就完成了横线的过渡位移,动画就做完了