vue实现滑动切换:切换选项时滑块有滑动过渡的效果

效果图

vue实现滑动切换:切换选项时滑块有滑动过渡的效果_第1张图片

思路:

1. 高亮的色块是独立的一个盒子,需要插入当前激活的内容用来撑开色块盒子的宽度,这样色块的宽度就会和当前激活的内容宽度一致,色块的字体颜色设置透明即可

2. 色块滑动的距离是读当前激活元素的offsetLeft,赋值给色块盒子的translateX 属性

3. 使用vue3的新属性,在css中使用v-bind()动态的设置可变化的属性

4. 在色块盒子加上过渡的属性transition,即可实现色块的滑动过度效果

实现代码

// 新建CSlideSwitch.vue组件




在文件中使用滑动切换组件




~~END~~

你可能感兴趣的:(vue.js,javascript,前端)