vue做简单的切换动画

492 阅读1分钟
  • 做tabs切换时,使用v-show切换太过于生硬,思考添加位移过渡动画,如果使用vue的transition就太过复杂,
  • 于是就想到了使用计算属性,通过点击事件改变横线的偏移量就可以完美实现效果。
  • 首先确定在tabs下面写一个横线

image.png

image.png

  • 这就是两个标签,和底部横线的静态效果
  • 然后给底部横线设置一个动态style属性,先取名为transform,这个值在计算属性中返回

image.png 使用es6模板字符串的写法就可以返回一个行内样式,通过变量movek控制这个横线的偏移量

image.png

在点击事件中给move赋值,就完成了横线的过渡位移,动画就做完了