css - 悬停后元素 "jumps"

Question

我正在尝试创建一组在悬停时展开和收缩的 Font-Awesome 社交媒体图标。但是，当我停止将鼠标悬停在每个图标上时会出现问题，图标中间的图像会“跳跃”而不是像图标的其余部分那样平滑地折叠。这是代码:

   body {
      margin: 0;
      padding: 0;
      font-family: 'Kreon', serif;
    }

    a {
      text-decoration: none; /* no underlines */
    }

    /*
    ** Rules for the flames in the footer
    */
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 10px;
      background-color: #36454f; /* Charcoal gray */
    }

    .flame {
      bottom: 10px;
      position: absolute;
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50% 0% 50% 50%;
      background-color: orangered;
      background-image: linear-gradient(to right top, yellow 15%, orange 25%, orangered 55%);
      transform: rotate(-45deg) skew(-10deg, -10deg);
      transition: 0.5s;
    }

    .flame:hover {
      height: 100px;
      width: 100px;
      transform: rotate(-45deg) skew(-10deg, -10deg);
      transition: 0.5s;
    }

    .flame-wrapper {
      position: relative;
      text-align: center;
    }

    /* Position each flame icon, before and after hover */
    /* Each of the different icons should be 10px apart */
    #flame-facebook {
      left: -155px;
      transition: left 0.5s;
    }
    #flame-facebook:hover {
      left: -165px;
    }

    #flame-github {
      left: -80px;
      transition: left 0.5s;
    }
    #flame-github:hover {
      left: -90px;
    }

    #flame-linkedin {
      left: -5px;
      transition: left 0.5s;
    }
    #flame-linkedin:hover {
      left: -15px;
    }

    #flame-freecodecamp {
      left: 70px;
      transition: left 0.5s;
    }
    #flame-freecodecamp:hover {
      left: 60px;
    }

    /* Style the Font-Awesome social media icons */
    .fa {
      font-size: 20px;
      position: relative;
      top: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transform: rotate(75deg) skew(30deg, -30deg);
      color: white;
    }

    /* Move the actual icon down from the top to "center" it */
    .fa::before {
      position: relative;
      top: 10px;
    }

    .flame:hover .fa {
      height: 60px;
      width: 60px;
      transform: rotate(75deg) skew(30deg, -30deg);
      transition: 0.5s;
    }

    .flame:hover .fa::before {
      top: 20px;
      transition: top 0.5s;
    }

<footer>
  <div id="flame-facebook" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.facebook.com/travis.lannoye" target="_blank" class="fa fa-facebook"></a>
    </div>
  </div>
  <div id="flame-github" class="flame-wrapper">
    <div class="flame">
      <a href="https://github.com/tlannoye11" target="_blank" class="fa fa-github"></a>
    </div>
  </div>
  <div id="flame-linkedin" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.linkedin.com/in/travis-lannoye-272a201b/" target="_blank" class="fa fa-linkedin"></a>
    </div>
  </div>
  <div id="flame-freecodecamp" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.freecodecamp.org/tlannoye11" target="_blank" class="fa fa-free-code-camp"></a>
    </div>
  </div>
</footer>

当您将鼠标悬停在其中一个火焰图标上，然后将鼠标移开时，您会发现问题所在。对类似问题的一些研究表明问题出在悬停时添加了边框，但我不明白这是如何应用的，因为我在悬停事件期间没有更改边框......我认为？

Answer 1

我认为你在这里所说的“跳跃”是指在火焰上悬停时有时会发生的滞后，有时它会直接从非悬停大小直接变为悬停大小而没有过渡。

这是由重新声明 height 和 width 引起的，这对浏览器来说是比使用 transform: scale(1.2) 更密集的任务，例如。

您为每种不同类型添加的特定 left 声明也会导致重绘并使事情变得滞后，删除它会停止问题。

您需要为您的效果调整确切的值，以及 transform-origin 属性(旋转和缩放会取消此操作)，但像这样的事情应该让您正确的道路。

更多信息:https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

如果您可以使用 flexbox，请参阅此代码块下方的进一步改进。

   body {
      margin: 0;
      padding: 0;
      font-family: 'Kreon', serif;
    }

    a {
      text-decoration: none; /* no underlines */
    }

    /*
    ** Rules for the flames in the footer
    */
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 10px;
      background-color: #36454f; /* Charcoal gray */
    }

    .flame {
      bottom: 10px;
      position: absolute;
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50% 0% 50% 50%;
      background-color: orangered;
      background-image: linear-gradient(to right top, yellow 15%, orange 25%, orangered 55%);
      transform: rotate(-45deg) skew(-10deg, -10deg);
      transition: 0.5s;
    }

    .flame:hover {
      transform: rotate(-45deg) skew(-10deg, -10deg) scale(1.2);
      transform-origin: bottom center;
      transition: 0.5s;
    }

    .flame-wrapper {
      position: relative;
      text-align: center;
    }

    /* Position each flame icon, before and after hover */
    /* Each of the different icons should be 10px apart */
    #flame-facebook {
      left: -155px;
      transition: left 0.5s;
    }

    #flame-github {
      left: -80px;
      transition: left 0.5s;
    }

    #flame-linkedin {
      left: -5px;
      transition: left 0.5s;
    }

    #flame-freecodecamp {
      left: 70px;
      transition: left 0.5s;
    }

    /* Style the Font-Awesome social media icons */
    .fa {
      font-size: 20px;
      position: relative;
      top: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transform: rotate(75deg) skew(30deg, -30deg);
      color: white;
    }

    /* Move the actual icon down from the top to "center" it */
    .fa::before {
      position: relative;
      top: 10px;
    }

    .flame:hover .fa {
      height: 60px;
      width: 60px;
      transform: rotate(75deg) skew(30deg, -30deg);
      transition: 0.5s;
    }

    .flame:hover .fa::before {
      top: 20px;
      transition: top 0.5s;
    }

<footer>
  <div id="flame-facebook" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.facebook.com/travis.lannoye" target="_blank" class="fa fa-facebook"></a>
    </div>
  </div>
  <div id="flame-github" class="flame-wrapper">
    <div class="flame">
      <a href="https://github.com/tlannoye11" target="_blank" class="fa fa-github"></a>
    </div>
  </div>
  <div id="flame-linkedin" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.linkedin.com/in/travis-lannoye-272a201b/" target="_blank" class="fa fa-linkedin"></a>
    </div>
  </div>
  <div id="flame-freecodecamp" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.freecodecamp.org/tlannoye11" target="_blank" class="fa fa-free-code-camp"></a>
    </div>
  </div>
</footer>

进一步改进:使用 Flexbox 代替绝对定位

如果你可以使用 flexbox，我会避免你在这里做的很多绝对定位并像这样重构:

   body {
      margin: 0;
      padding: 0;
      font-family: 'Kreon', serif;
    }

    a {
      text-decoration: none; /* no underlines */
    }

    /*
    ** Rules for the flames in the footer
    */
    footer {
      display: flex;
      justify-content: center;
      position: fixed;
      bottom: 0;
      width: 100%;
      border-bottom: 10px solid #36454f; /* Charcoal gray */
    }

    .flame {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50% 0% 50% 50%;
      background-color: orangered;
      background-image: linear-gradient(to right top, yellow 15%, orange 25%, orangered 55%);
      transform: rotate(-45deg) skew(-10deg, -10deg);
      transition: 0.5s;
    }

    .flame:hover {
      transform: rotate(-45deg) skew(-10deg, -10deg) scale(1.2);
      transition: 0.5s;
    }

    .flame-wrapper {
      text-align: center;
    }

    /* Position each flame icon, before and after hover */
    /* Each of the different icons should be 10px apart */
    #flame-facebook {
      transition: left 0.5s;
    }

    #flame-github {
      transition: left 0.5s;
    }

    #flame-linkedin {
      transition: left 0.5s;
    }

    #flame-freecodecamp {
      transition: left 0.5s;
    }

    /* Style the Font-Awesome social media icons */
    .fa {
      font-size: 20px;
      position: relative;
      top: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transform: rotate(75deg) skew(30deg, -30deg);
      color: white;
    }

    /* Move the actual icon down from the top to "center" it */
    .fa::before {
      position: relative;
      top: 10px;
    }

    .flame:hover .fa {
      height: 60px;
      width: 60px;
      transform: rotate(75deg) skew(30deg, -30deg);
      transition: 0.5s;
    }

    .flame:hover .fa::before {
      top: 20px;
      transition: top 0.5s;
    }

<footer>
  <div id="flame-facebook" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.facebook.com/travis.lannoye" target="_blank" class="fa fa-facebook"></a>
    </div>
  </div>
  <div id="flame-github" class="flame-wrapper">
    <div class="flame">
      <a href="https://github.com/tlannoye11" target="_blank" class="fa fa-github"></a>
    </div>
  </div>
  <div id="flame-linkedin" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.linkedin.com/in/travis-lannoye-272a201b/" target="_blank" class="fa fa-linkedin"></a>
    </div>
  </div>
  <div id="flame-freecodecamp" class="flame-wrapper">
    <div class="flame">
      <a href="https://www.freecodecamp.org/tlannoye11" target="_blank" class="fa fa-free-code-camp"></a>
    </div>
  </div>
</footer>