在javascript和css中实现顺序渐隐渐显动画时，立即设置display: none会导致渐隐动画无法播放。本文将深入探讨这一常见问题，并提供两种解决方案：利用settimeout延迟display属性的修改，或通过监听animationend事件确保动画完整执行。此外，还将介绍使用css transition实现更流畅、更简洁的渐隐效果的最佳实践，帮助开发者构建高性能且用户体验友好的动画序列。
理解问题：display属性与CSS动画的冲突
当尝试通过JavaScript和CSS结合实现元素的渐隐渐显效果时，一个常见的问题是，在元素开始渐隐动画后立即将其display属性设置为none，会导致渐隐动画完全不播放。这是因为display: none会立即将元素从渲染树中移除，使其在动画有机会执行之前就消失了。CSS动画（如@keyframes定义的动画）需要元素在DOM中可见并存在于渲染树中才能执行。
考虑以下场景：一个元素正在执行fade-out动画，目标是将opacity从1变为0。如果在此动画开始的瞬间，JavaScript代码紧接着执行element.style.display = 'none'，浏览器会立即隐藏该元素，从而跳过整个渐隐过程，直接呈现为“闪烁”消失。
最初的实现代码可能如下所示：
/* CSS 定义渐隐渐显关键帧动画 */
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}// JavaScript 尝试顺序执行动画和display修改
function changeDisplay(sections) {
for (let i = 0; i < sections.length; i++) {
if (window.getComputedStyle(sections[i]).display === 'grid') {
if (i + 1 === sections.length) {
// 尝试渐隐当前元素
sections[i].style.animation = 'fade-out 500ms';
// 问题所在：立即设置 display: none，导致动画中断
sections[i].style.display = 'none';
// 尝试渐显下一个元素
sections[0].style.display = 'grid';
sections[0].style.animation = 'fade-in 500ms';
break;
}
// ... 处理其他情况
}
}
}在上述代码中，sections[i].style.display = 'none' 紧跟在 sections[i].style.animation = 'fade-out 500ms' 之后执行，导致fade-out动画没有机会播放。
立即学习“前端免费学习笔记（深入）”；
解决方案一：使用setTimeout延迟display属性的修改
最直接的解决方案是等待渐隐动画完成其预定持续时间后，再将元素的display属性设置为none。这可以通过JavaScript的setTimeout函数实现。setTimeout允许你在指定的毫秒数后执行一个函数。
function changeDisplay(sections) {
for (let i = 0; i < sections.length; i++) {
if (window.getComputedStyle(sections[i]).display === 'grid') {
if (i + 1 === sections.length) {
const currentSection = sections[i];
const nextSection = sections[0]; // 假设下一个是第一个
// 1. 触发当前元素的渐隐动画
currentSection.style.animation = 'fade-out 500ms forwards'; // 使用 forwards 保持动画结束状态
// 2. 延迟执行 display: none 和下一个元素的渐显
setTimeout(() => {
currentSection.style.display = 'none';
currentSection.style.animation = ''; // 清除动画，避免冲突或残留样式
nextSection.style.display = 'grid';
nextSection.style.animation = 'fade-in 500ms forwards';
}, 500); // 延迟时间应与渐隐动画的持续时间一致
break;
}
// ... 处理其他情况
}
}
}注意事项：
- setTimeout的延迟时间应与CSS动画的持续时间（500ms）精确匹配。
- 为确保动画结束后元素保持最终状态，可以在CSS动画定义中添加forwards属性，如animation: fade-out 500ms forwards;。
- 在设置display: none后，最好清除元素的animation属性，以避免潜在的样式冲突或性能问题。
- setTimeout的精确性受浏览器事件循环影响，不能保证在所有情况下都精确到毫秒，但在大多数常见场景下已足够。
解决方案二：监听animationend事件
更健壮的解决方案是利用DOM事件animationend。当一个CSS动画完成其循环或到达其持续时间结束时，会触发animationend事件。通过监听这个事件，可以确保只有在渐隐动画真正结束后才修改display属性。
function changeDisplay(sections) {
for (let i = 0; i < sections.length; i++) {
if (window.getComputedStyle(sections[i]).display === 'grid') {
if (i + 1 === sections.length) {
const currentSection = sections[i];
const nextSection = sections[0];
// 定义动画结束时的处理函数
const handleAnimationEnd = () => {
currentSection.style.display = 'none';
currentSection.style.animation = ''; // 清除动画
currentSection.removeEventListener('animationend', handleAnimationEnd); // 移除事件监听器
// 触发下一个元素的渐显
nextSection.style.display = 'grid';
nextSection.style.animation = 'fade-in 500ms forwards';
};
// 监听当前元素的 animationend 事件
currentSection.addEventListener('animationend', handleAnimationEnd);
// 触发当前元素的渐隐动画
currentSection.style.animation = 'fade-out 500ms forwards';
break;
}
// ... 处理其他情况
}
}
}优点：
