js如何实现滑动效果
使用CSS transition实现滑动效果
通过CSS的transition属性结合transform实现平滑滑动。修改元素的transform: translateX()或translateY()值，并添加过渡效果。
.slide-element {
transition: transform 0.3s ease;
}
.slide-right {
transform: translateX(100px);
}const element = document.querySelector('.slide-element');
element.classList.add('slide-right'); // 触发滑动使用CSS animation实现滑动
通过@keyframes定义动画关键帧，绑定到元素上实现滑动效果。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-animation {
animation: slideIn 0.5s forwards;
}element.classList.add('slide-animation');使用requestAnimationFrame手动控制
通过逐帧修改样式实现更灵活的滑动控制，适合复杂交互场景。
function slide(element, distance, duration) {
const start = performance.now();
const initialPos = 0;
function step(timestamp) {
const progress = (timestamp - start) / duration;
const newPos = initialPos + distance * Math.min(progress, 1);
element.style.transform = `translateX(${newPos}px)`;
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
slide(element, 200, 1000); // 滑动200px，耗时1秒使用第三方库（如jQuery）
jQuery提供现成的滑动方法，例如slideToggle()、animate()。
$('.element').animate({ left: '+=200px' }, 500); // 向右滑动200px注意事项
- 性能优化：优先使用CSS动画，硬件加速性能更好。
- 响应式适配：滑动距离建议使用百分比或视口单位（如
vw）。 - 事件回调：通过
transitionend或animationend监听滑动结束事件。
element.addEventListener('transitionend', () => {
console.log('滑动结束');
});
