vant Switch 开关 技术分析

746 阅读1分钟

组件展示

实现细节

  1. 背景色的切换过渡效果 通过 transition: background-color 0.3s 实现
  2. 圆点的左右切换滑动效果 通过 transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05) 实现
  3. 还有一个细节:组件的size,可以通过设置font-size,圆点和外层元素都的宽高都以em为单位。看下图的示例代码
<vant-switch font-size="20px" />

.vant-switch {
    display: inline-block;
    width: 2em;
    height: 1em;
}
.vant-switch__node {
    width: 1em;
    height: 1em;
}