如何让动画运行以及同时更改 innerHTML 属性？

Question

我试图让一个正方形在其 Y 轴上翻转（旋转 180 度），以便显示其“背面”，并从蓝色变为红色，以及更改此 div 的 innerHTML 属性，这样 div 中最终状态的文本与最初（翻转之前）的文本不同。所以正面出现的“DAY”字在翻转后变成了背面的“MONDAY”。

为了尝试实现这一点，我使用了 css 动画。

我能够让盒子旋转并改变颜色。但是，我未能以我想要的方式更改文本。使用下面的代码，“星期一”一词出现在正面。我只希望“星期一”出现在背面。

另一个潜在的问题是如何显示文本，使其在框翻转后不翻转（反转）。

我发现的文本翻转问题的一个可能解决方案是：w3docs:

.flipH {
        transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
      }

但是，我仍然不知道如何按照我想要的方式更改文本。 （而且我还没有真正测试过文本的翻转，因为我想先了解如何更改实际的单词。）

我尝试过的内容如下，但无法以正确的方式更改文本。

我曾想过用canvas插入文本，但是我在Stack Overflow上找到Use Canvas as a CSS background这里关于使用canvas作为css背景的讨论对我来说太复杂了，我没有完全理解它，代码作为答案之一给出的解决方案似乎已被弃用。

所以我问这个问题，看看是否有另一种解决方案来解决更改正在播放动画的元素的文本的问题。

我还尝试制作一个位于顶部 div 下方的 div，并在翻转之前使用 display 属性（“display：none”）隐藏，然后使用“display：block”变得可见（并更改 z- index 属性），使用动画（关键帧），但它不起作用。即使我使用动画来更改此 div 的属性，下面的 div 也不会显示 - 将显示属性从“none”更改为“block”）。

我也尝试使用这里提到的“内容”属性Animating the content property，但是当我使用这个属性时，我发现框突然缩小到文本的大小。

function myPlayFunction(el){
  document.getElementById("day").innerHTML = "Monday";
  document.getElementById("day").style.animationPlayState = "running";   
}   

* {
  box-sizing: border-box;
}   

    
#day {
  
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
   z-index: 10;
   transform-origin: center;
   animation-iteration-count: 1;
   animation-timing-function: linear;
   text-align: center;
    line-height: 200px;
    font-size: 50px;
    font-family: 'Helvetica'; 
    font-weight: 800;
    
}

@keyframes example {
  100%{background-color: red; transform: rotateY(180deg); transform: scale(-1, 1);
        color: #1c87c9;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);}
}

<div id="day">DAY</div>

<div><p>Click the buttons to Play/Pause the animation:</p></div>
<div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button>
</div>

Answer 1

function myPlayFunction(el){
   document.getElementById("day").innerHTML = "Monday";
   document.getElementById("day").style.animationPlayState = "running";  
}   

#day { 
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
  z-index: 10;
  transform-origin: center;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
  font-family: 'Helvetica'; 
  font-weight: 800;   
}

@keyframes example {
  50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg);}
}

<div id="day">DAY</div>

<div><button onclick="myPlayFunction(this)" class="fas fa-play">Click this</button>
</div>

您可以通过在您的@keyframes 中稍作更改来做到这一点：

@keyframes example {
  50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg);}
}

您实际上并没有将 div 旋转 180 度（这将有助于解决反向文本问题），但用户认为 div 正在旋转

Answer 2

我能够通过使用 setTimeout 和使用 Pulse 的文本翻转解决方案来做到这一点。

代码如下：

function myPlayFunction(el){
    setTimeout(myFunction, 1500);
    document.getElementById("day").style.animationPlayState = "running";
    function myFunction() {
       document.getElementById("day").innerHTML = "MONDAY";
    }
}   

#day { 
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
   z-index: 10;
   transform-origin: center;
   animation-iteration-count: 1;
   animation-timing-function: linear;
   text-align: center;
    line-height: 200px;
    font-size: 40px;
    font-family: 'Helvetica'; 
    font-weight: 800;
    
}

@keyframes example {
   50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg); 
}

<div id="day">DAY</div>

<div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button>
</div>