css实现左右切换平滑效果

爱写代码的派大星2025-02-27 19:27

2025.02.25今天我学习了如何用css实现平滑效果

一、html相关代码

（1）设置往左、往右的动画属性，样式可以放在同一级。

（2）必须设置唯一key进行刷新数据，使用v-show来展示每次渲染的组件数量。

html 复制代码

<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代码

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%);
}