js实现slideup
JavaScript 实现 SlideUp 效果
在 JavaScript 中实现类似 jQuery 的 slideUp() 效果，可以通过操作 CSS 的 height 和 transition 属性来完成。以下是几种实现方式：
使用 CSS Transition 和 JavaScript
function slideUp(element, duration = 300) {
element.style.height = element.offsetHeight + 'px';
element.style.transition = `height ${duration}ms ease`;
// 触发重绘
element.offsetHeight;
element.style.height = '0';
// 动画结束后隐藏元素
setTimeout(() => {
element.style.display = 'none';
element.style.removeProperty('height');
element.style.removeProperty('transition');
}, duration);
}
// 使用示例
const box = document.querySelector('.box');
slideUp(box, 500);使用 requestAnimationFrame 实现更流畅的动画
function slideUp(element, duration = 300) {
const startHeight = element.offsetHeight;
const startTime = performance.now();
function animate(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const height = startHeight * (1 - progress);
element.style.height = height + 'px';
if (progress < 1) {
requestAnimationFrame(animate);
} else {
element.style.display = 'none';
element.style.removeProperty('height');
}
}
element.style.overflow = 'hidden';
requestAnimationFrame(animate);
}使用 CSS 动画和类切换
.slide-up {
animation: slideUp 0.3s ease forwards;
}
@keyframes slideUp {
from { height: var(--element-height); }
to { height: 0; }
}function slideUp(element, duration = 300) {
const height = element.offsetHeight;
element.style.setProperty('--element-height', height + 'px');
element.style.overflow = 'hidden';
element.classList.add('slide-up');
// 动画结束后隐藏元素
setTimeout(() => {
element.style.display = 'none';
element.classList.remove('slide-up');
element.style.removeProperty('--element-height');
}, duration);
}注意事项
- 确保元素具有
overflow: hidden属性，防止内容在高度变化时溢出 - 如果元素有 padding 或 margin，需要考虑这些值对高度计算的影响
- 对于更复杂的动画效果，可以考虑使用 Web Animations API
- 现代项目中通常使用 CSS 框架或动画库来实现这类效果，如 Animate.css 或 GSAP
替代方案
对于现代前端项目，可以考虑以下替代方案：
- 使用 CSS 的
transform: scaleY()实现类似效果 - 使用 Web Components 封装可重用的滑动动画组件
- 使用 Vue.js 的过渡系统或 React 的动画库实现组件级动画
