【问题标题】：Image won't stay visible for hover effect悬停效果的图像不会保持可见
【发布时间】：2021-11-28 14:30:08
【问题描述】：

您好，提前感谢您阅读我的问题。

目标：设置图像，使其在滚动到视图后平滑过渡到设置位置 - 但仍会对 :hover 做出反应。使用@keyframes 和一点JavaScript，我将图像设置为opacity: 0，并将其最终不透明度设置为opacity: .85。然后我在 CSS 中添加了一个悬停效果，使其成为opacity: 1

问题是，一旦完成过渡 - 它就会消失 - 恢复到原来的不透明度为零。我设法让它冻结在.85 和animation-fill-mode: forwards，而不是animation-fill-mode: none，但它不会响应:hover

下面是实际问题的测试 sn-p：

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>

如果我能帮上忙，那就太好了，我有点初学者，已经花了几个小时在这方面，欢迎所有反馈。非常感谢。

【问题讨论】：

标签： javascript html css user-interface animation

【解决方案1】：

解决方案 1

要了解为什么悬停效果不适用于animation-fill-mode: forwards，请阅读this answer。

您可以通过将 !important 属性添加到悬停样式来解决此问题：

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

在这种情况下，问题是过渡不适用于悬停。

解决方案 2

您可以完全删除动画并将最终状态样式添加到 shift_frame_center_img 类。

但由于CSS Specificity，您仍需要使用!important 属性。

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>

【讨论】：

【解决方案2】：

这个 sn-p 通过将 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 sn-p 系统之外，可以通过将另一个动画链接到前面运行 0.5 秒并将 img 设置为 opacity: 0 来保持动画设置不变。这在 sn-p 中不起作用系统（它进入了闪烁的循环）因此引入了一个但扩展的动画。

【讨论】：