Javascript中的setTimeout动画问题

Question

我已经创建了一个动画(当窗口重新加载时，你会看到这一点(。在这个动画完成后，另一个动画将开始，就像蜜蜂开始从蜂巢中出来(通过调用函数createBeesFromGate(((和进入蜂巢(通过调用功能createBees(((一样，我已经给出了一个内联函数来摧毁蜜蜂(通过给出0的不透明度(有时蜜蜂进出得很好，但在20到30秒后，蜜蜂会被困在蜂巢门上，失去点击能力(意味着当我点击时，它的透明度变为0(。

let siteInfo = document.querySelector(".site-info")
let beehivePiece = document.querySelectorAll(".beehive-piece");
let bees1 = document.querySelectorAll(".corr-p-1");
let bees2 = document.querySelectorAll(".corr-p-2");
let bees3 = document.querySelectorAll(".corr-p-3");
let bees4 = document.querySelectorAll(".corr-p-4");
let bees5 = document.querySelectorAll(".corr-p-5");
let bees6 = document.querySelectorAll(".corr-p-6");
let bees7 = document.querySelectorAll(".corr-p-7");
let beehiveGate = document.querySelector("#beehive-gate");
let gatekeeperBee = document.querySelector(".gate-keeper-bee");
let heroSvg = document.getElementById("hero-svg")
console.log(heroSvg);
// console.log(gatekeeperBee)
// console.log(beehivePiece[1])
window.addEventListener("load",check)
function check(){
siteInfo.classList.add("site-info-appear")
setTimeout(()=>{
beehivePiece[6].style="transform:translate(0px,0px)";
bees1[0].style="transform:translate(0px,0px)";
bees1[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees1[0].style="transform:translate(1000px,250px)";
bees1[1].style="transform:translate(1000px,250px)";
},1300)
},1500)
//  For BEES 2
setTimeout(()=>{
beehivePiece[5].style="transform:translate(0px,0px)";
bees2[0].style="transform:translate(0px,0px)";
bees2[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees2[0].style="transform:translate(1000px,250px)";
bees2[1].style="transform:translate(1000px,250px)";
},1300)
},2500)
//  For BEES 3
setTimeout(()=>{
beehivePiece[4].style="transform:translate(0px,0px)";
bees3[0].style="transform:translate(0px,0px)";
bees3[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees3[0].style="transform:translate(1000px,250px)";
bees3[1].style="transform:translate(1000px,250px)";
},1300)
},3000)
//  For BEES 4
setTimeout(()=>{
beehivePiece[3].style="transform:translate(0px,0px)";
bees4[0].style="transform:translate(0px,0px)";
bees4[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees4[0].style="transform:translate(1000px,250px)";
bees4[1].style="transform:translate(1000px,250px)";
},1300)
},3500)
//  For BEES 5
setTimeout(()=>{
beehivePiece[2].style="transform:translate(0px,0px)";
bees5[0].style="transform:translate(0px,0px)";
bees5[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees5[0].style="transform:translate(1000px,250px)";
bees5[1].style="transform:translate(1000px,250px)";
},1300)
},4000)

//  For BEES 6
setTimeout(()=>{
beehivePiece[1].style="transform:translate(0px,0px)";
bees6[0].style="transform:translate(0px,0px)";
bees6[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees6[0].style="transform:translate(1000px,250px)";
bees6[1].style="transform:translate(1000px,250px)";
},1300)
},4500)
//  For BEES 7
setTimeout(()=>{
beehivePiece[0].style="transform:translate(0px,0px)";
bees7[0].style="transform:translate(0px,0px)";
bees7[1].style="transform:translate(0px,0px)";
setTimeout(()=>{
bees7[0].style="transform:translate(1000px,250px)";
bees7[1].style="transform:translate(1000px,250px)";
},1300)
},5000)
setTimeout(()=>{
gatekeeperBee.style="transform:translate(0px,0px);"
beehiveGate.style="transform:translate(0px,0px);"
setTimeout(() => {
gatekeeperBee.style="transform:translate(1000px,250px)";

}, 2500);
},6000)

}

function createBees(){

setInterval(() => {
setTimeout(()=>{

console.log("bee created")
let b = heroSvg.innerHTML +=  `<use xlink:href="#theBee" 
class="newCreatedBee"  onclick="
(
function() {
document.querySelector('.newCreatedBee').style.opacity = 0;
document.querySelector('.newCreatedBee').style.transition = '0.5s';
}
)();"
style="transform: translate(1000px,${Math.floor(Math.random() * (300 - 10) +1  ) + 10}px);"
width="400" height="38.4" x="-30" y="290" />
`

let newBee = heroSvg.querySelector(".newCreatedBee")
setTimeout(() => {
newBee.style="transform: translate(0px,30px);"
newBee.addEventListener("transitionend",function(){
console.log("transition completed")
heroSvg.removeChild(heroSvg.lastElementChild)
})
}, 1000);
},1000)    
}, Math.floor(Math.random() * (50000 - 5000) +1  ) + 5000 );


}
createBees()
function createBeesFromGate(){
setInterval(() => {
console.log("Bees created from the gate");
setTimeout(()=>{
let b = heroSvg.innerHTML +=  `<use xlink:href="#theBee" 
class="newCreatedBeeComingFromHive" onclick="
(
function() {
document.querySelector('.newCreatedBeeComingFromHive').style.opacity = 0;
document.querySelector('.newCreatedBeeComingFromHive').style.transition = '0.5s';
}
)();"
style="transform: translate(0px,30px);"
width="400" height="38.4" x="-30" y="290" />
`

let newBee = heroSvg.querySelector(".newCreatedBeeComingFromHive")
// function remove(el) {
//     var element = el;
//     element.remove();
//   }
setTimeout(() => {
newBee.style.transform = ` translate(-1000px,300px)`
newBee.addEventListener("transitionend",function(){
console.log("transition completed")
heroSvg.removeChild(heroSvg.lastElementChild)
})

}, 1000);
},1000)    
}, Math.floor(Math.random() * (50000 - 11000) +1  ) + 11000 );


}
createBeesFromGate()

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
}
/* html{
border:5px solid blue;
} */
*,::before,::after{
margin:0;
padding:0;
box-sizing: border-box;   
}
body{
font-family:Roboto ;
/* border: 3px solid red; */
/* position: fixed; */
/* position: absolute; */
/* width:100%; */
}
.container{
/* border:2px solid black;   */
/* padding:10px; */
width:100%;
}
.header{
/* border:2px solid rgb(255, 179, 0); */
width:100%;
padding:.5em .5em;
}
.header-wrapper{
display:flex;
align-items: center;
justify-content:space-between;
padding:.8em 0em;
/* border:2px solid blue; */
width:90%;
margin:auto;
}
.site-title{
/* border: 2px solid red; */
margin-left: 2em;
font-size:2.3em;
font-weight:400;

}
.site-title-span{
font-weight:750;
color:#E47700;
}
.nav{
/* border:2px solid magenta; */
margin-right:2em;
/* align-self: flex-end; */
width:45%;
}
.nav ul{
display: flex;
list-style: none;
font-size:1.5em;
justify-content: space-between;
}
/* .nav ul li{
margin-right:1.5em;
} */
.nav ul li a {
text-decoration: none;
color:black;
font-weight: 500;
padding:6px;
}
.nav ul li a:hover{
color:white;
background:#FEBD33;
border-radius:50px;
transition: .3s all ease;
}
/* GO AND DO IT IN JS */
.active{
border-radius:50px;
background-color: #FEBD33;
color: white;
padding:0 12px;
}
.hero{
/* border:2px solid red; */
height:36vh;
/* height:100%;  for mobile view*/
font-family: poppins;
/* overflow: hidden; */


}
.hero-wrapper{
/* border: 2px solid hotpink; */
width:80%;
margin:0 auto;
margin-top:130px;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
/* flex-direction: column; */
flex-shrink: 0; 
align-items:center;

}
.site-info{
/* position: relative;
top: 155px;
left: 10.9em; */
display: inline-block;
width: 25em;
line-height: 28px;
opacity: 0;
transform: translateY(20px);
transition:2.5s;
/* border: 2px solid rebeccapurple; */
}
.site-info-appear{
opacity: 1;
transform: translateY(0px);
}
.site-info-heading{
font-size:3em;
/* border: 2px solid rebeccapurple; */
}
.site-info-text{
font-size: 25px;
font-weight: 600;
margin-top: 6px;
/* border: 2px solid rebeccapurple; */
}
.site-info-btn{
font-size:1.3em;
border-radius:50px;
padding:.3em .5em;
border:none;
background-color: #33BC00;
color:white;
margin-top: 19px;
cursor: pointer;
/* border: 2px solid rebeccapurple; */
}
.hero-beehive{
position: relative;
top: 0px;
left:0px;
/* right: 1em;  */
/* display:inline-block; */
width:300px;
height:300px;
/* border: 2px solid rebeccapurple; */

}
svg{
border:2px solid red;
width:155%;
height:25em;
float:left;
/* margin-left:0; */
/* display:inline-block; */
position:static;
top:0px;
left:0;
/* background:burlywood; */
/* overflow: hidden; */

/* float: right; */
}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
transform:translateY(px);
position:absolute;
}
.beehive-piece,.bee{
transition: .7s ;
}
.gate-keeper-bee,#beehive-gate{
transition: 2s ;
}
.newCreatedBee{
transition: 8s linear all ;
cursor:pointer;
}
.newCreatedBeeComingFromHive{
transition: 8s linear;
transform-origin:center;
/* position:absolute; */
/* transform: sc; */
}
.forest-container{
background-image:url("forest 1.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center ;
/* border:5px solid black; */
width:100%;
height:1050px;
}
.forest{
border:2px solid red;
width:100%;    
}
/* HONEY BEE WINGS FLYING ANIM */
#small-wing{
/* anim`ation: small-wing 2s infinite alternate ; */
animation: check .09s infinite alternate ;
/* animation-name: check;
animation-duration: 1s;
animation-iteration-count: infinite; */
/* transform: rotate(10deg); */

}
#large-wing{
animation: check .09s infinite alternate ;

}
@keyframes check{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-.4deg);
}
100%{
transform: rotate(.4deg);
}
}
.small-wing{
/* anim`ation: small-wing 2s infinite alternate ; */
animation: check .09s infinite alternate ;
/* animation-name: check;
animation-duration: 1s;
animation-iteration-count: infinite; */
/* transform: rotate(10deg); */
transform-origin: center;

}
.large-wing{
animation: check .09s infinite alternate ;
transform-origin: center;

}
@keyframes check{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-2.5deg);
transform-origin: center;

}
100%{
transform: rotate(2.5deg);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<!--header open-->
<div class="header-wrapper">
<div class="site-title">
<p>
<span class="site-title-span">B</span>ee
<span class="site-title-span">B</span>uzz
</p>
</div>
<div class="nav">
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
</div>
<!--header closed-->

<!-- HERO SECTION  -->
<div class="hero">
<div class="hero-wrapper">
<div class="site-info">
<h1 class="site-info-heading">
<span style="color:#E47700;font-weight:bolder;">B</span>ee
<span style="color:#E47700;font-weight:bolder;">B</span>uzz
<span style="font-size:.5em;">TM</span>
</h1>
<p class="site-info-text">
We are providing pure
forest bee honey and
protecting our environment
</p>
<button class="site-info-btn">
Read more
</button>
</div>
<div class="hero-beehive">
<svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">

<symbol id="theBee" viewBox="0 0 78 49" >
<g id="complete_bee">
<path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
<circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
<path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
<path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
<path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
<path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
<path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />

<path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />

<path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
<path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />

<path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
<path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
<circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
<circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
<path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
</g>
</symbol>

<g id="beehive 1">
<g id="first-beehive-setm">

<path id="hive-stem"
d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
fill="#502601" />
<path id="leaft-up"
d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
fill="#008100" />
<path id="leaf-side"
d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
fill="#33BC00" />
<path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
</g>4
<g>
<!-- beehive piece -->
<path id="b-peice-7" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
fill="#E47700" />
<!-- beehive piece -->  
<path id="b-peice-6" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
fill="#FF8800" />
<!-- beehive piece -->
<path id="b-peice-5" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
fill="#FFA900" />
<!-- beehive piece 4 -->
<path id="b-peice-4" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
fill="#FEBD33" />
<!-- beehive piece 3 -->
<path id="b-peice-3" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
fill="#FFA900" />
<!-- beehive piece 2 -->
<path id="b-peice-2" style="transform: translate(1000px,250px);"class="beehive-piece"
d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
fill="#FF8800" />
<!-- beehive piece 1 -->
<path id="b-peice-1" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
fill="#E47700" />

<!-- beehive keeper -->
<path id="beehive-gate"  style="transform: translate(1000px,250px);"
d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
fill="#763A02" />
</g>

<!-- <use xlink:href="#theBee" width="62.4" height="38.4"/> -->
<!-- <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" /> -->
<!-- corresponding piece-1  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee" width="62.4" height="38.4" x="80" y="155"  />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);"
class="corr-p-1 bee"   width="62.4" height="38.4" x="220" y="155" />

<!-- corresponding piece-2  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);"   width="62.4" height="38.4" class="corr-p-2 bee" x="25" y="195" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-2 bee"  width="62.4" height="38.4" x="260" y="195" />

<!-- corresponding piece-3  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="-6" y="245" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="290" y="245" />
<!-- corresponding piece-4  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="145" y="295" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="-200" y="295" />

<!-- corresponding piece-5  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="135" y="345" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="-180" y="345" />
<!-- corresponding piece-6  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="100" y="390" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="-150" y="390" />
<!-- corresponding piece-7  -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="50" y="435" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="-100" y="435" />

<!-- gate keeper bee -->
<use xlink:href="#theBee" 
class="gate-keeper-bee"
style="transform: translate(1000px,250px);"
width="400" height="38.4" x="-30" y="290" />


</svg>
</div>




</div>
</div>



<!-- 2ND SECTION FOREST -->

<div class="forest-container" >
<!-- <img src="Group.svg" style="width:100%;"
class="forest" alt="forest-vector"> -->
</div>





</div><!--END OF THE CONTAINER-->

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

Answer 1

从实验来看，我认为这与createBeesFromGate和createBees函数的时间有关，以及CSS transitions.newCreatedBee和.newCreatedBeeComingFromHive的定时。您对这两个函数使用随机定时，我注意到有时您的蜜蜂没有从createBees中删除，有时它是基于生成的随机数创建的BeesFromGate。使用CSS计时会影响它们是否可以在函数重置之前删除。我认为，当这些排列的时间安排导致蜜蜂无法被移走时，蜜蜂会被卡住。