js实现滑动效果
使用CSS Transition实现滑动效果
通过CSS的transition属性结合JavaScript修改样式实现平滑滑动。
// HTML结构示例
<div id="slider" style="width: 100px; height: 100px; background: red; transition: transform 0.5s ease;"></div>
// JavaScript代码
const slider = document.getElementById('slider');
slider.addEventListener('click', () => {
slider.style.transform = 'translateX(200px)'; // 向右滑动200px
});关键点：
transition定义动画属性和时长（如transform 0.5s）。- 通过修改
transform属性触发动画。
使用CSS Animation实现滑动
通过@keyframes定义动画，JavaScript控制动画的启停。
// CSS定义
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
// JavaScript控制
const slider = document.getElementById('slider');
slider.style.animation = 'slide 1s forwards'; // 触发动画优势：
- 支持更复杂的多阶段动画。
使用requestAnimationFrame手动控制动画
适用于需要精细控制动画的场景（如游戏、物理效果）。
let startTime;
const duration = 1000; // 动画时长1秒
const slider = document.getElementById('slider');
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);
slider.style.transform = `translateX(${progress * 200}px)`; // 滑动200px
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);适用场景：
- 需要动态计算动画路径或性能敏感的场景。
使用第三方库（如GSAP）
GreenSock Animation Platform (GSAP) 提供更强大的动画控制。
// 引入GSAP后使用
gsap.to("#slider", { x: 200, duration: 1 });优势：
- 跨浏览器兼容性更好。
- 支持复杂的时间轴和缓动函数。
注意事项
- 性能优化：优先使用
transform和opacity，避免触发重排。 - 响应式设计：滑动距离应动态计算（如根据视口宽度）。
- 移动端适配：添加
touch事件支持滑动交互。
