将 webkit 转换应用于跨类？答案

【问题标题】：Applying webkit transitions to span classes?将 webkit 转换应用于跨类？
【发布时间】：2017-02-12 11:14:40
【问题描述】：

我看到有人问过类似的问题，但这些解决方案不适用于我使用 span 类的方式。实际上，我使用跨度类作为悬停的替代文本。我想缓和/缓和悬停时的类，但我不知道在哪里应用 webkit 或我做错了什么。

HTML

<div class="mdmg2"><span class="alias">name</span> <span class="infor">age / tz / pm</span></div>

CSS

.mdmg2 { text-transform: lowercase; color: #fff; text-align: left; font-size: 40px; text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black; }
.mdmg2 .infor { display: none; }
.mdmg2:hover .alias { display: none; }
.mdmg2:hover .infor { display: inline; font-size: 30px; text-transform: uppercase; font-family: montserrat; position: relative; top: -10px; }

【问题讨论】：

标签： css css-transitions

【解决方案1】：

解读

据我了解，您希望.alias 在.mdmg2 不悬停时显示，.infor 在悬停时显示.你想在两者之间淡入淡出。

你的问题

您不能为display 属性设置动画，因此如果您想淡化内容，它就不适合了。但是，有一个名为 opacity 的 CSS 属性。这可以设置为0 和1 之间的任何小数，它对应于元素不透明程度（即透明程度）的百分比值。

这个属性可以被动画化，因此我们将display 样式改为使用opacity，并添加适当的代码来执行动画。尽管 OP 要求 webkit 转换，但转换没有供应商前缀（请参阅http://caniuse.com/#search=transition），因此属性只是transition。你可以阅读它的语法以及它是如何工作的here。

现在，有一个悬停动画，但与display 不同的是，使用不透明度，旧对象仍会占用页面空间；即两个spans 不在同一个空间。这显然是不对的，所以为了解决这个问题，我们在.alias (100px) 上设置了一个宽度。这确保了.alias 将始终占用100px，因此我们可以将.infor 移动到右侧的100px 以确保两个元素对齐。

解决方案

因此，您的问题的完整解决方案是：

.mdmg2 {
  text-transform: lowercase;
  color: #fff;
  text-align: left;
  font-size: 40px;
  text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black;
  position:relative;
}
.mdmg2 .infor {
  opacity:0;
  font-size: 30px;
  text-transform: uppercase;
  font-family: montserrat;
  transition:opacity 0.5s;
  position:relative;
  left:-100px;
}
.mdmg2 .alias {
  opacity:1;
  transition:opacity 0.5s;
  width:100px;
}
.mdmg2:hover .infor {
  opacity:1;
}
.mdmg2:hover .alias {
  opacity:0;
}

&lt;div class="mdmg2"&gt;&lt;span class="alias"&gt;name&lt;/span&gt; &lt;span class="infor"&gt;age / tz / pm&lt;/span&gt;&lt;/div&gt;

【讨论】：