您好，提前感謝您閱讀我的問題。

目標：設定影像，以便一旦它滾動到視圖中，它就會平滑地過渡到設定的位置 - 但仍然對:hover. 使用@keyframes和一點 JavaScript，我將影像設定為opacity: 0，它的最終不透明度為opacity: .85。然后我在 CSS 中添加了一個懸停效果以使其成為opacity: 1

問題是一旦它完成過渡 - 它就會消失 - 恢復到它的原始不透明度為零。我設法使其在凍結.85帶animation-fill-mode: forwards，而不是animation-fill-mode: none，但隨后將不回應:hover

這是實際問題的測驗片段：

let observer_img = new IntersectionObserver(updates => {
    updates.forEach(update => {
        if (update.isIntersecting) {
            update.target.classList.add('shift_frame_center_img');
        } else {
            update.target.classList.remove('shift_frame_center_img');
        }
    });
}, { threshold: 0 });

[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));

body {
  width: 100%;
  height: 100vh;
  background-color: lightgrey;
}

/* CHILD */
.features-img-wrapper img {
  width: 10rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  opacity: 0;
  transition: all .5s;
}

/* APPEND-CHILD */
.shift_frame_center_img {
  animation: center_img 1s 0.5s none;
}

/* CHILD ON HOVER */
.features-img-wrapper img:hover {
  opacity: 1;
  transform: scale(1.035);
}

/* KEYFRAMES */
@keyframes center_img {
  0% {
    transform: translateY(20rem);
  }
  100% {
    transform: translateY(0);
    opacity: .85;
  }
}

<body>
  <div class="features-img-wrapper">
      <img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
  </div>
</body>

如果我能得到這方面的幫助，那就太好了，我是一個初學者，已經在這方面花了幾個小時，歡迎所有反饋。非常感謝。

uj5u.com熱心網友回復：

解決方案1

要了解為什么懸停效果不適用于animation-fill-mode: forwards，請閱讀此答案。

您可以通過向!important懸停樣式添加屬性來解決此問題：

.features-img-wrapper img:hover {
  opacity: 1 !important;
  transform: scale(1.035) !important;
}

在這種情況下，問題是過渡不適用于懸停。

解決方案2

您可以完全洗掉影片并將最終狀態樣式添加到shift_frame_center_img類中。

但是!important由于CSS 特異性，您仍然需要使用該屬性。

let observer_img = new IntersectionObserver(updates => {
    updates.forEach(update => {
        if (update.isIntersecting) {
            update.target.classList.add('shift_frame_center_img');
        } else {
            update.target.classList.remove('shift_frame_center_img');
        }
    });
}, { threshold: 0 });

[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));

body {
  width: 100%;
  height: 100vh;
  background-color: lightgrey;
}

/* CHILD */
.features-img-wrapper img {
  width: 10rem;
  transform: translateY(20rem);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  opacity: 0;
  transition: all .5s;
}

/* APPEND-CHILD */
.shift_frame_center_img {
  transform: none !important;
  opacity: .85 !important;
}

/* CHILD ON HOVER */
.features-img-wrapper img:hover {
  opacity: 1 !important;
  transform: scale(1.035) !important;
}

<body>
  <div class="features-img-wrapper">
    <img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
  </div>
</body>

uj5u.com熱心網友回復：

此代碼段通過將 img 設定為不透明度 1 作為其初始狀態來消除對填充模式轉發的需要，因此它將在影片結束時恢復到該狀態。

影片本身被更改為需要 1.5 秒而不是 1 秒，前三分之一只是將 img 不透明度設定為 0，因此無法看到。這給出了延遲效果。

let observer_img = new IntersectionObserver(updates => {
    updates.forEach(update => {
        if (update.isIntersecting) {
            update.target.classList.add('shift_frame_center_img');
        } else {
            update.target.classList.remove('shift_frame_center_img');
        }
    });
}, { threshold: 0 });

[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));

body {
  width: 100%;
  height: 100vh;
  background-color: lightgrey;
}

/* CHILD */
.features-img-wrapper img {
  width: 10rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  opacity: 0;
  transition: all .5s;
    opacity: 1;
}

/* APPEND-CHILD */
.features-img-wrapper img {
  animation: center_img 1.5s 0s none;
}

/* CHILD ON HOVER */
.shift_frame_center_img:hover {
  opacity: 1;
  transform: translateY(0) scale(1.035);
}

/* KEYFRAMES */
@keyframes center_img {
  0% {
    transform: translateY(20rem) scale(1);
    opacity: 0;
  }
    33.33% {
    transform: translateY(20rem) scale(1);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: .85;
  }
}

<body>
  <div class="features-img-wrapper">
      <img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
  </div>
</body>

注意：由于每個轉換設定都會重置未包含的任何內容，因此每個設定中都包含 tranlateY 和 scale。

在 SO 片段系統之外，可以通過將另一個影片鏈接到前面運行 0.5 秒并將 img 設定為 opacity: 0 來保持影片設定不變。這在片段系統中不起作用（它進入了回圈閃爍）因此引入了一個但擴展的影片。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/312907.html

標籤：javascript html css 用户界面动画片

上一篇：Python問題是計算后我無法為“標簽”設定新的計算值

下一篇：如何在UI中顯示預測串列（來自我的后端代碼，當用戶條目中出現“Text_Changed”時？XamarinForms

懸停效果的影像不會保持可見

解決方案1

解決方案2