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

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

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

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

问题发生在 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,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，代码终于被修复了。我删除了一些不必要的属性，例如 transition: 2s ease-in-out; 中的 display: block; & .tab:hover + .a { 并更改了 html 中的一些代码

解决方法

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

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

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

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

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

解决方法

相关推荐