uni-segmented-control 切换动画 怎么写 css

uni-segmented-control，通常是指单选切换按钮组件，其在切换时可能会有淡入淡出、滑动等动画效果。在CSS中，你可以通过`transition`属性添加动画，并配合`:hover`, `:focus`或`:active`伪类来控制不同的状态。下面是一个简单的例子：

.uni-segmented-control {
  display: flex;
  transition: background-color 0.3s ease; /* 添加背景颜色过渡 */
}

.uni-segmented-control__item {
  flex: 1;
  cursor: pointer;
}

.uni-segmented-control__item:hover,
.uni-segmented-control__item:focus,
.uni-segmented-control__item.active {
  background-color: #ccc; /* 鼠标悬停、焦点和激活时的颜色 */
}

在这个示例中，当用户鼠标悬停、点击或按钮被激活时，切换按钮的背景颜色会平滑地从默认色过渡到指定的新颜色，持续时间为0.3秒。

如果你想创建更复杂的动画，比如滑动效果，你可能需要结合CSS的`transform`和`will-change`属性，甚至使用JavaScript来处理某些关键帧动画。记得在实际应用中，还需要考虑浏览器兼容性和性能优化。