元素动画时间未按预期使用 CSS 加载/启动

Question

我想使用仅使用 CSS 的用户将鼠标悬停在其中的一小部分上时出现的元素制作一个弹出式页脚。我在 jsfiddle 上运行代码，它正在工作。

不幸的是，当我在 google 版本 88.0.4（使用 Visual Studio 代码）上从 localhost 运行它时，我可以清楚地看到元素属性没有按时加载。它们的生成速度太慢。转换确实有效，问题只发生在刷新/页面加载之后。

这是代码： https://jsfiddle.net/hzvgcw58/4/

这是视频： https://youtu.be/hiNX-e9uHWA

问题发生在 00:02 到 00:06，当我刷新页面时

如何解决这个问题？

.tab-container {
  position: relative;
  height: 200px;
  width: 870px;
  margin: auto;
  overflow: hidden;
  background-color: rgba(255, 247, 234, 0.95);

}


.tab {
  position: relative;
  bottom: -153px;
  height: 47px;
  width: 182px;
  z-index: 9;
  border-radius: 15px 15px 0px 0px;
  background-color: none;
  opacity: 0.5;
  transition: 2s ease-in-out;
}

.tab::after {
      width: 870px;
      height: 113px;
      background-color: none;
      position: absolute;
      bottom: -112px;
      left: 0px;
      content: '';
      z-index: 3;
}


.a {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 150px;
  height: 19px;
  background-color: rgba(54, 52, 49, 1);
  border-radius: 15px 15px 0px 0px;
  padding: 14px 16px;
  font-size: 17px;
  transition: 2s ease-in-out;
}

.b {
  background-color: rgba(54, 52, 49, 1);
  position: absolute;
  bottom: -113px;
  z-index: 3;
  padding: 6px 0px;
  height: 101px;
  width: 870px;
  transition: 2s ease-in-out;
}

/* Change background color of buttons on hover */
.tab:hover {
  bottom: -40px;
  transition: 2s ease-in-out;
}

.tab:hover + .a {
  cursor: pointer;
  transition: 2s ease-in-out;
  bottom: 112px;
  display: block;
}

.tab:hover ~ .b {
  cursor: pointer;
  transition: 2s ease-in-out;
  display: block;
  bottom: 0;
  
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="footer-container">
      <div class="footer">
        <div class="tab-container">
          <div class="tab">
          </div>  
          <div class="a">
              London
          </div>
          <div class="b">
              <h3>London</h3>
              <p>London is the capital city of England.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

编辑： 感谢@rauberdaniel，代码终于被修复了。我在.tab:hover + .a {中删除了一些不必要的属性，例如transition: 2s ease-in-out;和display: block;，并在html中更改了一些代码

Answer 1

更改您的transition 属性以仅包含您要转换的值（在本例中为bottom），例如：

.tab:hover {
  transition: bottom 2s ease-in-out;
}

请注意，转换位置值（如top 或bottom）通常不是一个好主意，因为它会为浏览器触发大量昂贵的布局任务。相反，您应该使用transform: translate(…) 来向上移动页脚。