求助：欢迎动画结束后重定向至其他页面的实现方案

嗨，作为前端新手能想到通过判断元素状态来触发跳转，这个思路很棒！下面给你两种可靠的实现方法，推荐第一种，更适配你的CSS动画场景：

方法一：监听CSS动画结束事件（推荐） #

如果你的.ml11元素是通过CSS动画实现淡出效果的，直接监听animationend事件是最准确的方式——动画完成时会自动触发这个事件，不用手动判断opacity。

具体代码如下：

// 等页面DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取动画元素
  const welcomeElement = document.querySelector('.ml11');
  
  // 监听动画结束事件
  welcomeElement.addEventListener('animationend', function() {
    // 替换成你要跳转的目标页面URL
    window.location.href = 'https://your-target-page.com';
  });
});

为什么推荐这个方法？ #

• 完全贴合动画生命周期，不会因为动画时长调整、样式变化而失效
• 性能更优，不需要持续监听元素状态

方法二：监听元素opacity属性变化 #

如果你确实需要通过判断opacity是否为0来触发跳转，可以使用MutationObserver监听元素的样式变化（不推荐用定时器轮询，会浪费性能）：

document.addEventListener('DOMContentLoaded', function() {
  const welcomeElement = document.querySelector('.ml11');
  
  // 创建观察者实例，监听样式变化
  const opacityObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // 只关注style属性的变化
      if (mutation.attributeName === 'style') {
        // 获取元素当前计算后的样式
        const currentStyle = window.getComputedStyle(welcomeElement);
        // 检查opacity是否为0
        if (currentStyle.opacity === '0') {
          // 执行跳转
          window.location.href = 'https://your-target-page.com';
          // 跳转后停止监听，避免重复触发
          opacityObserver.disconnect();
        }
      }
    });
  });
  
  // 开始监听元素的style属性
  opacityObserver.observe(welcomeElement, {
    attributes: true,
    attributeFilter: ['style']
  });
});

使用提醒 #

• 把上述代码放在页面的<script>标签里，或者单独的JS文件中，确保放在</body>标签之前，或者用DOMContentLoaded包裹（代码里已经加了），这样能保证元素已经被加载到页面中。
• 记得把代码里的https://your-target-page.com替换成你实际要跳转的页面地址。

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