如何使用 innerHTML 使文本过渡平滑，并在更改时淡入淡出 in/out？

Question

这是我的第一个 post，所以如果我对 posting 之类的格式有点不满意，请原谅我。所以我正在为一个游戏团队编写一个网站，他们希望他们的花名册（其中有包含玩家姓名的框）扩展并在您将鼠标悬停在名称上时提供一些信息。我已经得到它来扩展和更改文本，但它看起来有点唐突。有没有办法让文字变化更顺畅？我不能为每个人单独设置 CSS，因为至少会有 20 个。到目前为止，我的进展如下。提前致谢！

    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>

如何使用 innerHTML 使文本过渡平滑，并在更改时淡入淡出 in/out？

How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?

html

javascript

transition