悬停在元素故障转换过渡答案

【问题标题】：Hovering on element glitches transform transition悬停在元素故障转换过渡
【发布时间】：2018-12-22 07:54:54
【问题描述】：

悬停在底部时如何阻止每个字母出现故障？发生这种情况是因为字母改变了位置，所以它正在快速切换它的过渡，但是如何更好地编码这样过渡会平滑呢？ https://codepen.io/anon/pen/XBmPMV

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

#text span {
  display: inline-block;
  transition: transform 200ms;
}

#text span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

考虑一个让悬停区域变大的伪元素：

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

span {
  display: inline-block;
  transition: transform 200ms;
  position: relative;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

span:hover::before {
  transform:rotate(-10deg);
  height: calc(100% + 0.5em);
}

<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

【讨论】：

【解决方案2】：

在悬停时对元素应用边框以增加它们的面积就可以了。如果你走这条路线，你还需要在悬停时应用负边距以保持元素到位。

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
  span {
    display: inline-block;
  transition: transform 200ms;
    &:hover {
      transform: translateY(-1em) rotate(10deg) scale(1.5);
      border: 0.3em solid transparent;
      margin: -0.3em;
    }
  }
}

【讨论】：