需要帮助获得平滑的文本内容 CSS 过渡
Posted
技术标签:
【中文标题】需要帮助获得平滑的文本内容 CSS 过渡【英文标题】：Need help getting smooth CSS transition of text content 【发布时间】：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://***.com">S/Overflow</a>
</li>
</ul>
</div>
</body>【问题讨论】：
【参考方案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://***.com">S/Overflow</a>
</li>
</ul>
</div>
</body>【讨论】：
以上是关于需要帮助获得平滑的文本内容 CSS 过渡的主要内容，如果未能解决你的问题，请参考以下文章