需要帮助获得平滑的文本内容 CSS 过渡答案

【问题标题】：Need help getting smooth CSS transition of text content需要帮助获得平滑的文本内容 CSS 过渡
【发布时间】：2016-10-30 08:27:43
【问题描述】：

我在一个链接（称为“链接”）上添加了这个很酷的 CSS 过渡效果，当您将鼠标悬停在该链接上时会出现两个额外的链接。最重要的是，“Links”这个词本身会变成“LinkedIn”。

问题是，两个额外链接的不透明度过渡非常平滑，而“Links”到“LinkedIn”的文本过渡则不是。它只是立即打开悬停。

有什么方法可以让它更流畅地匹配其他链接？不知何故从Links淡出到LinkedIn？

谢谢！

.links {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  color: white;
  font-family: 'heebo';
  font-size: 30px;
  text-align: center;
  width: 140px;
}
.links ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.linksG {
  color: #F28500;
  text-decoration: none;
  opacity: 0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.linksL:before {
  color: white;
  text-decoration: none;
  content: 'Links';
  transition: content 1s;
  -moz-transition: content 1s;
  -webkit-transition: content 1s;
}
.linksS {
  color: #D95D39;
  text-decoration: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
  opacity: 1.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
  opacity: 1.0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
  content: 'LinkedIn';
  text-decoration: none;
  transition: content .55s;
  -moz-transition: content .55s;
  -webkit-transition: content .55s;
}

<body style="background-color: black;">
  <div class="links">
    <ul>
      <li>
        <a class="linksG" href="http://github.com">Github</a>
      </li>
      <li>
        <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
      </li>
      <li>
        <a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

【问题讨论】：

标签： html css hyperlink hover css-transitions

【解决方案1】：

当您更改文本时，您不能使用 css transition，但您可以在 :before 中添加其他文本并以不透明度显示它

.links {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  color: white;
  font-family: 'heebo';
  font-size: 30px;
  text-align: center;
  width: 140px;
}
.links ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.linksG {
  color: #F28500;
  text-decoration: none;
  opacity: 0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.contentClass{
  position:relative;
}
.linksL:before {
  position:absolute;
  left:0;
  color: white;
  text-decoration: none;
  content: 'Links';
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.linksL:after {
  position:absolute;
  left:0;
  color: white;
  opacity:0;
  text-decoration: none;
  content: 'Linkedin';
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.linksS {
  color: #D95D39;
  text-decoration: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
  opacity: 1.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
  opacity: 1.0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
  opacity:0;
  text-decoration: none;
  transition: opacity .55s;
  -moz-transition: opacity .55s;
  -webkit-transition: opacity .55s;
}
.links:hover .linksL:after {
  opacity:1;
  text-decoration: none;
  transition: opacity .55s;
  -moz-transition: opacity .55s;
  -webkit-transition: opacity .55s;
}

<body style="background-color: black;">
  <div class="links">
    <ul>
      <li>
        <a class="linksG" href="http://github.com">Github</a>
      </li>
      <li class="contentClass">
        <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
      </li>
      <li>
        <a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

【讨论】：