将鼠标悬停在元素上会出现转换转换故障 [英] Hovering on element glitches transform transition

问题描述

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

#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>

推荐答案

考虑一个将使悬停区域更大的伪元素：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

#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>

这篇关于将鼠标悬停在元素上会出现转换转换故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！