文本过渡卡顿根据页面大小向下

问题描述 投票：0回答：1

所以我正在尝试制作一个用于练习和一些小型学校项目的网站。我正在尝试让一个盒子里面有一个标题，并设置一个图片作为背景，当悬停时，盒子的高度向下扩展，所以它从底部变大，以显示更多的图片，让文本从底部淡入顶部和标题向上移动一点。

该工作的所有部分，除了向下过渡和淡入的文本。最初的问题是如何修复所有不同尺寸的口吃，但是，在我更改了一些百分比并设法让它工作之后页面的最大宽度尺寸。现在，当页面宽度非常小时（例如，它被放置在屏幕右侧，并且浏览器尽可能小。然后可能比这大 50px），它似乎在向上过渡之前向下移动。宽度越小效果越明显。我知道没有人会使用这么小的页面，但无论如何让它能够工作就很好了。我尝试使用 VW 来修复它，但没有成功。还有另一种方法可以使其响应吗？这是我的网站链接，以便您可以查看。

https://tubzpi.xyz/school.html

这里是与CSS相关的代码。它由图片 CSS、覆盖 CSS 和向下过渡的文本组成：

$(document).ready(function() {
  $("#seven-wonders").hover(
    function() { // On hover
      $("#additional-text").stop().animate({
        "top": "40%",
        "opacity": "1"
      }, 100); // 500ms animation duration
    },
    function() { // On hover out
      $("#additional-text").stop().animate({
        "top": "-10%",
        "opacity": "0"
      }, 100); // 500ms animation duration
    }
  );
});
#seven-wonders {
  background-image: url('https://www.pixel4k.com/wp-content/uploads/2020/08/great-wall-of-china-4k_1596916657-2048x1365.jpg');
  background-position: 60% 60%;
  /* Center the image */
  background-size: cover;
  /* Ensure the image always covers the entire box */
  height: 115px;
  width: 85vw;
  border-radius: 10px;
  transition: all 0.5s ease;
  /* Transition for the hover effect */
  margin: 0 auto;
}

#seven-wonders:hover {
  height: 200px;
  /* Increase the height on hover */
  width: 85vwpx;
  /* Increase the width on hover */
}

#seven-wonders-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100%;
  /* Make the overlay always match the size of the box */
  width: 100%;
  /* Make the overlay always match the size of the box */
  opacity: 1;
  transition: 0.5s ease, opacity 0.5s;
  font-size: 36px;
  color: #ffffff;
  display: flex;
  /* Add this line */
  justify-content: center;
  /* Add this line */
  align-items: center 0;
  /* Add this line */
  padding-top: 0px;
  position: relative;
  /* Add this line */
  border-radius: 10px;
  transition: background 0.8s ease;
  /* Change this line */
}

#seven-wonders:hover #seven-wonders-overlay {
  background: rgba(0, 0, 0, 0.2);
  /* Change this line */
}

.borderlinks {
  color: #ffffff;
  position: absolute;
  /* Add this line */
  top: 35px;
  /* Add this line */
  text-decoration: none;
  transition: top 0.9s ease;
  /* This will now transition both ways */
}

#seven-wonders:hover .borderlinks {
  top: 10%;
  /* Move the text to the top of the box on hover */
}

#additional-text {
  color: #e7dfdf;
  opacity: 0;
  position: absolute;
  top: -1%;
  /* Start from above the box */
  width: 75vw;
  text-align: center;
  font-size: 17px;
  transition: top 0.8s ease, opacity 0.4s ease;
  -webkit-transition: top 0.8s ease, opacity 0.4s ease;
  -moz-transition: top 0.8s ease, opacity 0.4s ease;
  -o-transition: top 0.8s ease, opacity 0.4s ease;
}

#seven-wonders:hover #additional-text {
  opacity: 1;
  font-size: 17px;
  height: 10%;
  display: flex;
  align-items: center;
  text-align: top;
  justify-content: center;
  top: -100%;
  /* Slide down to the middle of the box */
  transform: translateY(50%);
}

@media only screen and (max-width: 1374px) {
  #seven-wonders:hover #additional-text {
    height: 30px;
    /* Increase the height */
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>School Projects</title>
  <link rel="preload" as="script" href="index.js">
  <link rel="icon" href="favicon.ico" type="image/gif">


</head>

<body id="school-projects-page" class="dark-mode">
  <header>
    <h1 class="title-text" id="school-title">School Projects</h1>
  </header>
  <div id="menu-container">
    <div class="menu-icon" id="menu-icon">☰</div>
    <div class="dropdown" id="dropdown">
      <div><a href="index.html" id="home-link">Home</a></div>
      <div><a href="http://tubzpi.xyz:5252/" target="_blank" class="dashboard-link align-left">Visit Dashboard</a></div>
      <div><a href="school.html" id="school-projects">School Projects</a></div>
      <div><span id="dark-mode-toggle">Light Mode</span></div>
    </div>
  </div>
  <div id="seven-wonders">
    <div id="seven-wonders-overlay">
      <a class="borderlinks" href="7wonders.html">7 Wonders of the World</a>
      <div id="additional-text">Embark on a virtual journey to explore the majestic Seven Wonders of the World. From the Great Wall of China to the stunning Taj Mahal, each wonder has a unique story to tell. Click to uncover the fascinating history and breathtaking beauty of these
        remarkable landmarks</div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="index.js"></script>
</body>

</html>

如上所示，宽度已经很小，因此当您将鼠标悬停在其上时，它会出现卡顿。

html css responsive-design css-animations
1个回答
0
投票

发生这种情况的原因是一些 css 规则以及您应用它们的方式的组合。具体来说，这个规则是：

.feature-box:hover .additional-text
，它添加了
display: flex; align-items: center; height: 40px;
。显示柔性允许 
align-items
将文本垂直居中。即使您设置了 40px，它也会超出这些范围。如果您将 
overflow: hidden;
添加到 
.additional-text
并观察调整屏幕宽度时文本被截断的程度，您可以清楚地看到这一点。

  • 在 1400px+ 的更宽屏幕上，即使没有在 CSS 中设置高度（使用当前内容），
    .additional-text
    的高度也确实约为 40 像素。移除悬停后，
    .additional-text
    会丢失 
    align-items: center;
    ，但实际上仅移动约 1-2 个像素。
  • 在大约 1000 像素的屏幕宽度下，
    .additional-text
    的高度约为 50 像素，因此对于 
    display: flex; align-items: center;
    ，其上方约 5 像素溢出，下方约 5 像素溢出（40 像素 + 5 顶部溢出 + 5 溢出底部 = 50 像素）。移除悬停后，
    .additional-text
    会下降约 5 像素，这并不明显。
  • 屏幕宽度约为 370 像素，
    .additional-text
    现在的高度实际上约为 120 像素。然而，对于 
    height: 40px; display: flex; align-items: center
    ，40px 在 40px 设置高度之上溢出，40px 在 40px 设置高度之下溢出 (40+40+40=120)。现在，当您这次移除悬停时，
    .additional-text
    立即下降 40px，因为 
    align-items: center;
    突然不再应用。

我在示例中添加了溢出规则，以便您可以看到文本从 

display: flex;
和 
align-items: center;
跳转。我还帮助增加了动画时间，这样你就可以看到这个过程变慢了。

解决这个问题的方法是混合移动显示器：flex；默认规则为 

.additional-text
，而不依赖于 
:hover
。我对您的代码 CSS 以及一些媒体查询进行了一些更改以使其正常工作。如果您将我所做的与您所做的进行比较，您会发现一些变化，希望您越多地探索这些变化就会有意义。

$(document).ready(function() {
  $("#seven-wonders").hover(
    function() { // On hover
      $("#additional-text").stop().animate({
        "top": "30%",
        "opacity": "1"
      }, 100); // 500ms animation duration
    },
    function() { // On hover out
      $("#additional-text").stop().animate({
        "top": "-10%",
        "opacity": "0"
      }, 100); // 500ms animation duration
    }
  );
});
#seven-wonders {
  background-image: url('https://www.pixel4k.com/wp-content/uploads/2020/08/great-wall-of-china-4k_1596916657-2048x1365.jpg');
  background-position: 60% 60%;
  /* Center the image */
  background-size: cover;
  /* Ensure the image always covers the entire box */
  height: 115px;
  width: 85vw;
  border-radius: 10px;
  transition: all 0.5s ease;
  /* Transition for the hover effect */
  margin: 0 auto;
}

@media(max-width: 450px){
  #seven-wonders {
    height: 170px;
  }
}

#seven-wonders:hover {
  height: 200px;
  /* Increase the height on hover */
  width: 85vwpx;
  /* Increase the width on hover */
}

#seven-wonders-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100%;
  /* Make the overlay always match the size of the box */
  width: 100%;
  /* Make the overlay always match the size of the box */
  opacity: 1;
  transition: 0.5s ease, opacity 0.5s;
  font-size: 36px;
  color: #ffffff;
  display: flex;
  /* Add this line */
  justify-content: center;
  /* Add this line */
  align-items: center 0;
  /* Add this line */
  padding-top: 0px;
  position: relative;
  /* Add this line */
  border-radius: 10px;
  transition: background 0.8s ease;
  /* Change this line */
}

#seven-wonders:hover #seven-wonders-overlay {
  background: rgba(0, 0, 0, 0.2);
  /* Change this line */
}

.borderlinks {
  color: #ffffff;
  position: absolute;
  /* Add this line */
  top: 35px;
  /* Add this line */
  text-decoration: none;
  transition: top 0.9s ease;
  /* This will now transition both ways */
}

@media(max-width: 450px){
  .border-links {
    font-size: 2rem;
  }
}

#seven-wonders:hover .borderlinks {
  top: 10%;
  /* Move the text to the top of the box on hover */
}

#additional-text {
  color: #e7dfdf;
  opacity: 0;
  position: absolute;
  top: -1%;
  /* Start from above the box */
  width: 75vw;
  text-align: center;
  font-size: 17px;
  transition: top 0.8s ease, opacity 0.4s ease;
  -webkit-transition: top 0.8s ease, opacity 0.4s ease;
  -moz-transition: top 0.8s ease, opacity 0.4s ease;
  -o-transition: top 0.8s ease, opacity 0.4s ease;
  /*overflow: hidden;*/
  display: flex;
  align-items: center;
  justify-content: center;
  top: -100%;
  /* Slide down to the middle of the box */
  transform: translateY(20%);
}

@media(max-width: 450px){
  #additional-text {
    transform: translateY(0%);
  }
}

#seven-wonders:hover #additional-text {
  opacity: 1 !important;
  font-size: 17px;
  /*height: 10%;*/
  /*text-align: top;*/
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>School Projects</title>
  <link rel="preload" as="script" href="index.js">
  <link rel="icon" href="favicon.ico" type="image/gif">


</head>

<body id="school-projects-page" class="dark-mode">
  <header>
    <h1 class="title-text" id="school-title">School Projects</h1>
  </header>
  <div id="menu-container">
    <div class="menu-icon" id="menu-icon">☰</div>
    <div class="dropdown" id="dropdown">
      <div><a href="index.html" id="home-link">Home</a></div>
      <div><a href="http://tubzpi.xyz:5252/" target="_blank" class="dashboard-link align-left">Visit Dashboard</a></div>
      <div><a href="school.html" id="school-projects">School Projects</a></div>
      <div><span id="dark-mode-toggle">Light Mode</span></div>
    </div>
  </div>
  <div id="seven-wonders">
    <div id="seven-wonders-overlay">
      <a class="borderlinks" href="7wonders.html">7 Wonders of the World</a>
      <div id="additional-text">Embark on a virtual journey to explore the majestic Seven Wonders of the World. From the Great Wall of China to the stunning Taj Mahal, each wonder has a unique story to tell. Click to uncover the fascinating history and breathtaking beauty of these
        remarkable landmarks</div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="index.js"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.