时间戳

首页 > 解决方案 > 元素动画时间未按预期使用 CSS 加载/启动

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

问题描述

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

标签： htmlcssanimationhoverfooter

解决方案

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

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

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

推荐阅读