修复CSS文本替换动画中的跳转

Question

我有一个文本框，每当我更改其中的文本时，我都想在它上做一个奇特的文本滑入/滑出效果。我可以切换文本并触发动画，它甚至可以多次工作，但在动画过程中，容器div会出现奇怪的跳到位/调整大小的情况。我尝试过将文本元素的边距与动画的其余部分一起设置动画，但这不起作用。我不能调整div的大小，因为它包含在一个flexbox中，下面有一个图像，我不想被推到一边。我可以做些什么来修复此问题并使动画更平滑？

function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":(");
}, 1500)
}, 1000)

body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
@keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
@keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}

<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>

Answer 1

这样尝试：

function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":)");
}, 1500)
}, 1000)

body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
position: relative;
display:block;
width:100%;
}
#centerTextContainer > p {
position:absolute;
display:block;
width:100%;
left:0;
right:0;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
@keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
@keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}

<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>

动画中的p元素需要绝对定位，以便top和bottom转换将按预期工作。