如何使用innerHTML平滑地進行文本過渡，並在更改時淡入/淡出？

Question

這是我的第一篇文章，因此，如果我對發布的格式不滿意，請原諒。 因此，我正在為一個游戲團隊編寫一個網站，他們希望他們的名冊（其中有包含玩家姓名的盒子）能夠擴展，並在您將鼠標懸停在姓名上時提供一些信息。 我已經得到它來擴展和更改文本，但它看起來有點突然。 有沒有一種方法可以使文本更改更流暢？ 我不能為每一個單獨的CSS，因為至少會有20個CSS。 到目前為止，我的進展如下。 提前致謝！

  function replace(element, replacement) { element.innerHTML = replacement; } function unreplace(element, replacement) { element.innerHTML = replacement; } 

 .box { background-color: #81C441; display: inline-block; margin: 0px 10px; text-align: center; line-height: 180px; width: 200px; height: 180px; margin-bottom: 20px; font-family: arial; transition: 1s; transform: scale(1.0); } .box:hover { transition: 1s; transform: scale(1.1); } 

 <div class="boxcontainer"> <div onmouseover="replace(this, 'ROLE')" onmouseout="unreplace(this, 'NAME')" class="box w3-center w3-animate-top">NAME</div> </div> 

Answer 1

您不能（輕松地）為content變化制作動畫-例如，基於同樣的邏輯，您不能為font-family制作動畫。

但是，您可以將兩個文本重疊，只需將它們懸停在父元素上而不使用JS即可更改其屬性。

包括演示。

 .wrapper { position: relative; } .toHide, .toShow { transition: opacity 1s ease-in-out; position: absolute; } .toShow { opacity: 0; } .wrapper:hover .toHide { opacity: 0; } .wrapper:hover .toShow { opacity: 1; } 

 <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div>