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

Question

我试图让一个正方形在它的 Y 轴上翻转（旋转 180 度）以便它显示它的“背面”，并从蓝色变为红色，以及更改 innerHTML 属性的 div，因此 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，并在翻转前使用显示属性（“显示：none”）将其隐藏，然后使用“显示：块”（并更改 z-index 属性），使用动画（关键帧）变得可见，但它没有用。即使我使用动画更改此 div 的属性，下面的 div 也不会显示 - 将显示属性从“none”更改为“块”）。

我也尝试过使用这里提到的“内容”属性 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>

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

How to get animation to run as well as change the innerHTML property at the same time?

html

javascript

css

animation

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

How to get animation to run as well as change the innerHTML property at the same time?

html

javascript

css

animation

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