我正在尝试制作一个在悬停时展开并显示产品的盒子，我创建了它，但是当我从底部悬停在它上面时，悬停动画会产生一些故障效果，如果只有图像从中出来的话。我在 mouseenter 和 mouseleave 的 eventListener 中使用 gsap 制作了这个效果，所以你们可以看一下我的代码并告诉我我做错了什么以及我应该如何修复它。
这是你的狙击手，如果需要的话可以检查一下。
function page2boxhover() {
// box1 hover in box content
var box = document.querySelector("#box1");
box.addEventListener("mouseenter", () => {
gsap.to(box, {
height: "300px",
duration: 0.2,
});
var img = document.querySelectorAll("#box1 img");
img.forEach(function (e) {
e.style.opacity = 1;
e.style.scale = 1;
});
});
box.addEventListener("mouseleave", () => {
gsap.to(box, {
height: "60px",
});
var img = document.querySelectorAll("#page2 .elem .box .boxContent img");
img.forEach(function (e) {
e.style.opacity = 0;
e.style.scale = 0;
});
});
// box2 hover in box context
var box2 = document.querySelector("#box2");
box2.addEventListener("mouseenter", () => {
gsap.to(box2, {
height: "300px",
duration: 0.2,
});
var img = document.querySelectorAll("#box2 .boxContent img");
img.forEach(function (e) {
e.style.opacity = 1;
e.style.scale = 1;
});
});
box2.addEventListener("mouseleave", () => {
gsap.to(box2, {
height: "60px",
});
var img = document.querySelectorAll("#box2 img");
img.forEach(function (e) {
e.style.opacity = 0;
e.style.scale = 0;
});
});
//box3 hover in box content
var box3 = document.querySelector("#box3");
box3.addEventListener("mouseenter", () => {
gsap.to(box3, {
height: "300px",
duration: 0.2,
});
var img = document.querySelectorAll("#box3 .boxContent img");
img.forEach(function (e) {
e.style.opacity = 1;
e.style.scale = 1;
});
});
box3.addEventListener("mouseleave", () => {
gsap.to(box3, {
height: "60px",
});
var img = document.querySelectorAll("#box3 img");
img.forEach(function (e) {
e.style.opacity = 0;
e.style.scale = 0;
});
});
}
page2boxhover();#page2 {
display: flex;
align-items: center;
justify-content: space-between;
height: 100vh;
width: 100%;
padding: 3vw 2vw;
position: relative;
}
#page2 .elem {
height: 100%;
width: 31%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#page2 .elem img {
height: 100%;
width: 100%;
object-fit: cover;
scale: 1.1;
}
.elem .box {
border-radius: 50px;
height: 60px;
width: 70%;
position: absolute;
background-color: #c1aaa3;
}
.elem .box .boxHead {
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.boxHead h5 {
font-size: 12px;
font-weight: 100;
}
.boxHead h5:nth-child(3) {
font-weight: 600;
}
#page2 .elem .box .boxContent {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
#page2 .elem .box .boxContent img {
padding: 10px;
height: 150px;
opacity: 0;
scale: 0;
transition: all 0.2s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Good Co</title>
<link rel="shortcut icon" href="./favicon-32x32.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
</head>
<body>
<div id="page2">
<div id="elem1" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/f445a3d15e318fd217579e88ec2c6d0140246403-3574x4467.jpg/DSC0078_Dexter%20Kim.jpg?rect=448,0,2679,4467&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #C3D8C5;" data-scroll data-scroll-speed="-1" id="box1" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>HOME</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/7a2007de38624a0b2935416bf51a4584889aa232-5000x5000.png/Website%20Products%20(12).png?w=1024&h=1024&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/7d180ca25ade6277a215b634318056d551de9da8-5000x5000.png/Website%20Products%20(5).png?w=320&h=320&auto=format"
alt="">
</div>
</div>
</div>
<div id="elem2" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/90d06c39f74f1365c801ec2a063227969c5ef940-2560x3840.jpg/LucyTweed_Photo:KatieKarrs.jpg?rect=129,0,2303,3840&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #F2DCCB;" data-scroll data-scroll-speed="-1" id="box2" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>PANTRY</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/ff380ebfee344ff98d24d4156ded6b9dc22a2a2a-5000x5000.png/Change-The-Course-Cookbook-Two-Good-Co.png?w=320&h=320&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/4206e9c3f7ab098369c39a2194b82eeca6bb0664-6166x4111.png/DSC0005_Dexter%20Kim.png?rect=0,4,6166,4104&w=320&h=213&auto=format"
alt="">
</div>
</div>
</div>
<div id="elem3" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/d3151106849ff2494d66916cf554c68a0603444d-902x1500.png/Rectangle%20220.png?rect=1,0,900,1500&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #FFFFFF;" data-scroll data-scroll-speed="-1" id="box3" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>BATH</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/63474079ab0c7723b75bd63b24d8bbc652349640-1408x1408.png/Cleanse%20&%20Nourish%20Hand%20Wash%20Two%20Good%20Co.png?w=320&h=320&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/99866b12faf44f7490e6037dc197947334ce0a72-1408x1408.png/Nourish%20&%20Soothe%20Hand%20Lotion%20Two%20Good%20Co.png?w=320&h=320&auto=format"
alt="">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>所以我只是组织了代码并删除了 gsap 代码，以便使用纯 CSS 制作动画，并且似乎修复了它。
function page2boxhover() {
const toggleBox = (el, bool) => el.classList.toggle("mouseEnter", bool);
[...document.querySelectorAll(".box")].forEach(box => {
box.addEventListener("mouseenter", () => toggleBox(box, true));
box.addEventListener("mouseleave", () => toggleBox(box, false));
})
}
page2boxhover();#page2 {
display: flex;
align-items: center;
justify-content: space-between;
height: 100vh;
width: 100%;
padding: 3vw 2vw;
position: relative;
}
#page2 .elem {
height: 100%;
width: 31%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#page2 .elem img {
height: 100%;
width: 100%;
object-fit: cover;
scale: 1.1;
}
.elem .box {
border-radius: 50px;
height: 60px;
width: 70%;
position: absolute;
background-color: #c1aaa3;
}
.elem .box .boxHead {
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.boxHead h5 {
font-size: 12px;
font-weight: 100;
}
.boxHead h5:nth-child(3) {
font-weight: 600;
}
#page2 .elem .box .boxContent {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
#page2 .elem .box .boxContent img {
padding: 10px;
height: 150px;
opacity: 0;
scale: 0;
transition: all 0.2s;
}
/* let css handle the animation */
.box {
transition: height .7s;
}
.box.mouseEnter {
height: 300px;
transition: height .2s !important;
}
.box.mouseEnter .boxContent img {
opacity: 1 !important;
scale: 1 !important;
}<div id="page2">
<div id="elem1" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/f445a3d15e318fd217579e88ec2c6d0140246403-3574x4467.jpg/DSC0078_Dexter%20Kim.jpg?rect=448,0,2679,4467&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #C3D8C5;" data-scroll data-scroll-speed="-1" id="box1" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>HOME</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/7a2007de38624a0b2935416bf51a4584889aa232-5000x5000.png/Website%20Products%20(12).png?w=1024&h=1024&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/7d180ca25ade6277a215b634318056d551de9da8-5000x5000.png/Website%20Products%20(5).png?w=320&h=320&auto=format"
alt="">
</div>
</div>
</div>
<div id="elem2" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/90d06c39f74f1365c801ec2a063227969c5ef940-2560x3840.jpg/LucyTweed_Photo:KatieKarrs.jpg?rect=129,0,2303,3840&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #F2DCCB;" data-scroll data-scroll-speed="-1" id="box2" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>PANTRY</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/ff380ebfee344ff98d24d4156ded6b9dc22a2a2a-5000x5000.png/Change-The-Course-Cookbook-Two-Good-Co.png?w=320&h=320&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/4206e9c3f7ab098369c39a2194b82eeca6bb0664-6166x4111.png/DSC0005_Dexter%20Kim.png?rect=0,4,6166,4104&w=320&h=213&auto=format"
alt="">
</div>
</div>
</div>
<div id="elem3" class="elem">
<img data-scroll data-scroll-speed="1"
src="https://cdn.sanity.io/images/w8f1ak3c/production/d3151106849ff2494d66916cf554c68a0603444d-902x1500.png/Rectangle%20220.png?rect=1,0,900,1500&w=640&h=1067&fit=min&auto=format"
alt="">
<div style="background-color: #FFFFFF;" data-scroll data-scroll-speed="-1" id="box3" class="box">
<div class="boxHead">
<i class="ri-add-line"></i>
<h5>SHOP</h5>
<h5>BATH</h5>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="boxContent">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/63474079ab0c7723b75bd63b24d8bbc652349640-1408x1408.png/Cleanse%20&%20Nourish%20Hand%20Wash%20Two%20Good%20Co.png?w=320&h=320&auto=format"
alt="">
<img src="https://cdn.sanity.io/images/w8f1ak3c/production/99866b12faf44f7490e6037dc197947334ce0a72-1408x1408.png/Nourish%20&%20Soothe%20Hand%20Lotion%20Two%20Good%20Co.png?w=320&h=320&auto=format"
alt="">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>