html用js监听元素实现判断值的改变然后再次显示动画/js循环调用css动画

为了实现你的需求，下面是一个示例 JavaScript 代码。当 #jumpOutdd 的 left 属性变为 0% 时，给 #jumpOut 元素重新加载动画（即让它的 jumpOut 类重新触发一次动画）。

实现思路：

1. 使用 MutationObserver 来监听 #jumpOutdd 元素的 left 样式属性变化。
2. 当 left 属性变为 0% 时，触发 #jumpOut 元素的动画，重新加载 jumpOut 类。
3. 动画完成后移除 jumpOut 类，以便下次可以重新加载。

代码实现：

<div id="jumpOut" class="jumpOut">
                            <div class="title titProSet">领创校园文化高端品牌</div>
                            <div class="subTitle defProSet">淬文华 · 炼精品 · 铸名校</div>
                            </div>

<style>

@keyframes jumpOut {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: scale(0.1) translate(0, -20px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

.jumpOut {
  animation: jumpOut 1s ease-out;
}
</style>

<script>
    // 监听 #jumpOutdd 的 left 属性变化
    const targetElement = document.getElementById('jumpOutdd');
    const jumpOutElement = document.getElementById('jumpOut');

    // 创建一个MutationObserver来观察#jumpOutdd的left变化
    const observer = new MutationObserver((mutationsList) => {
      for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
          const leftValue = window.getComputedStyle(targetElement).left;
          if (leftValue === '0px') {  // 判断left是否为0%

            jumpOutElement.style.display = 'block';

            // 触发 #jumpOut 元素的动画
            jumpOutElement.classList.add('jumpOut');

            // 动画结束后移除类，以便下次触发
            jumpOutElement.addEventListener('animationend', () => {
              jumpOutElement.classList.remove('jumpOut');
            });
          }
          else{
              jumpOutElement.style.display = 'none';

          }

        }
      }
    });

    // 配置MutationObserver，观察style属性变化
    observer.observe(targetElement, { attributes: true });

    // 模拟 #jumpOutdd 的 left 变化
    setInterval(() => {
      targetElement.style.left = targetElement.style.left === '0%' ? '100%' : '0%';
    }, 3000);  // 每3秒改变 left 属性，模拟循环
  </script>

解释：

1. MutationObserver：

   • 监听 #jumpOutdd 元素的 style 属性变化。每当 left 属性变化时，都会触发回调函数。
   • 如果 left 的值为 0%，则触发 #jumpOut 元素的动画，给它添加 jumpOut 类。
   • 动画结束后，移除 jumpOut 类，以便下次重新加载动画。

2. 模拟元素的移动：

   • 使用 setInterval 每 3 秒钟改变 #jumpOutdd 的 left 属性，使其在 0% 和 100% 之间切换。

3. CSS 动画：

   • jumpOut 类中的动画会被触发，表现为元素从缩小到正常大小并上移的效果。

这样，每当 #jumpOutdd 的 left 属性变为 0% 时，#jumpOut 元素的动画会重新加载，完成动画后再次可以触发。

最后关键修改：

1. 隐藏和显示 #jumpOutdd：

   • 当 left 不为 0% 时，设置 targetElement.style.display = 'none' 来隐藏 #jumpOutdd。
   • 当 left 为 0% 时，设置 targetElement.style.display = 'block' 来重新显示 #jumpOutdd 元素。

2. 动画触发条件：

   • 当 #jumpOutdd 位置变为 0% 时，显示该元素并触发 #jumpOut 元素的动画。

动作流程：

• 每 3 秒钟 #jumpOutdd 的 left 属性在 0% 和 100% 之间切换。
• 如果 #jumpOutdd 的 left 为 100%，则该元素隐藏，直到 left 属性为 0% 时才会显示，并触发动画。