如何在进度条动画完成时触发LMS完成事件？

以下是整合了进度条逻辑和LMS完成事件触发的完整代码，移除了上传照片相关文本，进度条加载完成后会执行和你之前iframe代码相同的事件触发操作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progress Bar Trigger</title>
  <style>
    /* 进度条样式 */
    .progress-container {
      width: 80%;
      margin: 50px auto;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }
    .progress-bar {
      width: 0%;
      height: 30px;
      background-color: #4CAF50;
      transition: width 3s ease-in-out; /* 可修改数值调整进度条动画时长 */
    }
    .progress-text {
      text-align: center;
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
  <script>
    // 保留与LMS通信的核心逻辑
    window.addEventListener('message', e => window.evolve = e.ports[0]);

    // 进度条完成后触发LMS完成事件
    function triggerCompletion() {
      evolve?.postMessage('completed');
      document.querySelector('.progress-text').textContent = '进度完成，已触发LMS完成事件';
    }

    // 页面加载时启动进度条
    window.onload = function() {
      const progressBar = document.querySelector('.progress-bar');
      // 启动进度条动画
      progressBar.style.width = '100%';
      // 监听动画结束事件，执行触发操作
      progressBar.addEventListener('transitionend', triggerCompletion);
    }
  </script>
</head>
<body class="htmlNoPages">
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>
  <div class="progress-text">正在加载...</div>
</body>
</html>

关键说明： #

• 保留了你原代码中与LMS（Evolve）通信的核心逻辑，确保能正常和LMS交互
• 进度条通过CSS过渡动画实现平滑加载，可通过修改transition属性的3s来调整加载时长
• 监听进度条的transitionend事件，在动画完全结束后执行和之前iframe一致的事件触发逻辑
• 已移除所有上传照片相关文本，仅保留进度条和状态提示内容

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