实现Div旋转时动态切换文本及无限循环动画的技术咨询

嘿，我来帮你搞定这个需求！要实现旋转过程中切换文本+无限循环的效果，咱们得结合CSS动画控制和JavaScript的动画事件监听——毕竟CSS没法直接修改DOM内容，得靠JS在合适的时机切换文本，才能让整个过程流畅自然。

第一步：调整CSS动画，优化切换时机 #

首先，咱们要重构动画逻辑：把动画分成「旋转到背面→切换文本→旋转回正面」的完整循环，这样切换过程会完全隐藏在背面，用户看不到突兀的文本变化。同时开启无限循环，给元素加上backface-visibility: hidden让背面的文本不可见。

修改后的CSS代码：

#text-1 {
  text-align: center;
  width: 150px;
  height: 100px;
  /* 设置2秒时长的无限循环动画 */
  animation: rotateAnimation 2s infinite;
  /* 隐藏背面元素，避免切换时看到旧文本残影 */
  backface-visibility: hidden;
}

@keyframes rotateAnimation {
  0% {
    transform: rotateY(0deg); /* 初始正面状态 */
  }
  50% {
    transform: rotateY(180deg); /* 旋转到背面，这是切换文本的最佳时机 */
  }
  100% {
    transform: rotateY(360deg); /* 旋转回正面，完成一次循环 */
  }
}

第二步：用JavaScript监听动画事件，切换文本 #

接下来咱们用JS监听动画的循环事件，在每次动画执行到背面阶段时切换文本。这里用animationiteration事件最精准——它会在每次动画循环结束时触发，刚好对应一次完整的旋转周期。

完整的HTML+JS代码：

<body>
  <div class="div-1">
    <p id="text-1"> Text 1 </p>
  </div>

  <script>
    const textElement = document.getElementById('text-1');
    // 准备需要切换的文本列表，你可以随意添加或修改内容
    const textList = ["Text 1", "Text 2", "Text 3", "Text 4"];
    let currentIndex = 0;

    // 监听动画循环结束事件，每次循环切换文本
    textElement.addEventListener('animationiteration', () => {
      // 切换到下一个文本，循环遍历数组
      currentIndex = (currentIndex + 1) % textList.length;
      textElement.textContent = textList[currentIndex];
    });
  </script>
</body>

额外优化：精准在背面切换文本 #

如果想在旋转到背面的瞬间就切换文本（而不是等整个循环结束），可以用定时器配合动画时长来触发：

textElement.addEventListener('animationstart', () => {
  // 动画执行到1秒时（刚好是50%的背面位置）切换文本
  setInterval(() => {
    currentIndex = (currentIndex + 1) % textList.length;
    textElement.textContent = textList[currentIndex];
  }, 1000);
});

这样就能完美实现你想要的「每次旋转都切换文本，无限循环」的效果啦！

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