[英]How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?
这是我的第一篇文章,因此,如果我对发布的格式不满意,请原谅。 因此,我正在为一个游戏团队编写一个网站,他们希望他们的名册(其中有包含玩家姓名的盒子)能够扩展,并在您将鼠标悬停在姓名上时提供一些信息。 我已经得到它来扩展和更改文本,但它看起来有点突然。 有没有一种方法可以使文本更改更流畅? 我不能为每一个单独的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>
您不能(轻松地)为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.