如何在运行动画的同时更改innerHTML属性

Question

我正试图使一个正方形在其Y轴上翻转(旋转180度(，以便显示其"；背面"；，并从蓝色更改为红色，以及更改此div的innerHTML属性，以便div中处于最终状态的文本与最初(翻转之前(的文本不同。因此，出现在前面的单词，"；DAY"；，更改为"；星期一"；在翻转后的背面。

为了尝试实现这一点，我使用了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上发现，关于使用canvas作为css背景的讨论对我来说太复杂了，我也没有完全理解，其中一个答案中作为解决方案给出的代码似乎已经被否决了。

因此，我提出这个问题是为了看看是否有其他解决方案可以解决更改正在进行动画处理的元素的文本的问题。

我还尝试制作一个位于顶部div下方的div，并在翻转之前使用display属性("display:none"(进行隐藏，然后使用"display:none"使其可见；显示：块"；(同时更改z索引属性(，使用动画(关键帧(，但不起作用。即使我使用动画更改了这个div的属性，下面的div也不会显示——将display属性从"更改为"；none"；至"；块"(。

我还尝试使用"；内容"；属性，这里谈到了设置内容属性的动画，但当我使用此属性时，我发现框突然缩小到了文本的大小。

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旋转180deg(这将有助于解决反向文本问题(，但用户认为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>