css实现左右切换平滑效果
2025.02.25今天我学习了如何用css实现平滑效果
一、html相关代码
（1）设置往左、往右的动画属性，样式可以放在同一级。
（2）必须设置唯一key进行刷新数据，使用v-show来展示每次渲染的组件数量。
<transition-group :name="switch_type=='up'?'to-left':'to-right'" tag="div" style="width: 100%;display: flex;align-items: center">
<div v-for="(item,index) in 7" :key="index" v-show="index<4"></div>
</transition-group>二、css代码
//往左平滑
.to-left-enter-active, .to-left-leave-active {
transition: transform 0.5s;
}
.to-left-enter-to, .to-left-leave {
transform: translateX(0);
}
.to-left-enter, .to-left-leave-to {
transform: translateX(-100%);
}
//往右平滑
.to-right-enter-active, .to-right-leave-active {
transition: transform 0.5s;
}
.to-right-enter-to, .to-right-leave {
transform: translateX(0);
}
.to-right-enter, .to-right-leave-to {
transform: translateX(100%);
}