移动端视图下网站动画元素消失问题排查与CSS过渡覆盖方案

问题概述 #

• 基于IntersectionObserver实现元素可视时触发入场动画：桌面端显示正常，动画逻辑为元素从X轴-100%、透明度0滑动至X轴0、透明度1
• 移动端（屏幕宽度≤700px）下除单个元素外，其余元素完全消失
• 尝试在@media(max-width:700px)媒体查询中重定义.hidden/.hidden2/.show类，将过渡效果改为背景淡入（使用translateZ(-100%)、模糊滤镜等），但无论调整媒体查询位置还是重写属性，均无法覆盖原有动画样式
• 发现CSS媒体查询代码存在语法错误：.hidden2:nth-child(3)的定义未闭合大括号，且包含无效字符-100

相关代码 #

CSS 代码 #

/* 原有动画样式 */
.hidden, .hidden2 {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.8s ease;
}
.show {
  opacity: 1;
  transform: translateX(0);
}

/* 移动端媒体查询（存在语法错误） */
@media(max-width:700px) {
  .hidden, .hidden2 {
    opacity: 0;
    transform: translateZ(-100%);
    filter: blur(8px);
    transition: all 0.6s ease;
  }
  .show {
    opacity: 1;
    transform: translateZ(0);
    filter: blur(0);
  }
  .hidden2:nth-child(3) {
    /* 此处未闭合大括号，且存在无效字符-100 */
}

JS 代码 #

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.hidden, .hidden2').forEach(el => {
  observer.observe(el);
});

HTML 示例片段 #

<div class="hidden">元素1</div>
<div class="hidden2">元素2</div>
<div class="hidden2">元素3</div>

请求事项 #

1. 排查代码中的缺陷（包括已发现的语法错误及导致移动端元素消失的原因）
2. 提供移动端动画属性成功覆盖原有样式的解决方案

内容的提问来源于stack exchange，提问作者Coiny