组件展示
实现细节
- 背景色的切换过渡效果 通过
transition: background-color 0.3s实现 - 圆点的左右切换滑动效果 通过
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05)实现 - 还有一个细节:组件的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;
}