js实现左右滑入
使用CSS和JavaScript实现左右滑入效果
通过CSS过渡和JavaScript事件监听实现元素左右滑入效果。以下是两种常见实现方式：
CSS关键帧动画结合类切换
<style>
.slide-in-left {
animation: slideInLeft 0.5s forwards;
}
.slide-in-right {
animation: slideInRight 0.5s forwards;
}
@keyframes slideInLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
</style>
<script>
function toggleSlide(element, direction) {
element.classList.remove('slide-in-left', 'slide-in-right');
void element.offsetWidth; // 触发重绘
element.classList.add(`slide-in-${direction}`);
}
</script>使用CSS过渡和transform属性
function slideIn(element, direction) {
element.style.transition = 'transform 0.3s ease-out';
element.style.transform = `translateX(${direction === 'left' ? '-100%' : '100%'})`;
setTimeout(() => {
element.style.transform = 'translateX(0)';
}, 10);
}实现手势滑动检测
通过touch事件实现触摸滑动检测：
let startX, endX;
const threshold = 50; // 滑动阈值
element.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
element.addEventListener('touchend', (e) => {
endX = e.changedTouches[0].clientX;
const diffX = endX - startX;
if (Math.abs(diffX) > threshold) {
if (diffX > 0) {
// 向右滑动
slideIn(element, 'right');
} else {
// 向左滑动
slideIn(element, 'left');
}
}
});使用第三方库实现
考虑使用Swiper.js等专业滑动库：
import Swiper from 'swiper';
new Swiper('.swiper-container', {
effect: 'slide',
loop: true,
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto'
});响应式滑动控制
添加窗口大小变化时的处理：
function handleResize() {
if (window.innerWidth < 768) {
// 移动端启用滑动
element.classList.add('mobile-slide');
} else {
// 桌面端禁用滑动
element.classList.remove('mobile-slide');
}
}
window.addEventListener('resize', handleResize);
handleResize(); // 初始化执行性能优化建议
使用will-change属性提升动画性能：
.sliding-element {
will-change: transform;
}对于复杂场景考虑使用requestAnimationFrame：
function animateSlide(timestamp) {
// 动画逻辑
requestAnimationFrame(animateSlide);
}
requestAnimationFrame(animateSlide);
