您好，提前感谢您阅读我的问题。
目标:设置图像，以便一旦滚动到视图中，它会平滑地过渡到设置的位置-但仍然对: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>如果我能拿这这将是美好的,我是一个初学者和已经花了几个小时,都欢迎您的反馈。非常感谢。
解决方案1
要理解为什么悬停效果不能与animation-fill-mode: forwards一起工作，请阅读这个答案。
你可以通过添加!important属性到悬停样式来修复这个问题:
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
问题是，在这种情况下，过渡将不工作的悬停。
<标题>解决方案2 h1> 可以完全删除动画，并将最终状态样式添加到shift_frame_center_img类中。
但是由于CSS的特殊性，你仍然需要使用!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>这段代码通过将img设置为不透明度1作为其初始状态，从而消除了填充模式转发的需要，因此它将在动画结束时恢复为该状态。
动画本身被修改为1.5秒而不是15秒，前三分之一简单地将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>注意:由于每个变换设置将重置任何未包含的内容，平移和缩放都包含在每个设置中
在SO代码片段系统之外，可以通过将另一个动画链接到前面运行0.5s并将img设置为不透明度:0来保持动画设置不变。这在片段系统中不起作用(它进入了一个闪烁的循环)，因此引入了一个扩展动画。