主题:现在几乎在每个网站上都使用,简单但令人印象深刻的动画,它成为一个真正引人注目的
技术:本动画使用css3及js技术完成
需求:鼠标点击,动画执行,鼠标再次点击,动画恢复到原来的效果(可以理解为倒放)
我出现的bug:昨天写js控制动画时出现了一个bug,鼠标点击middle大盒子,动画只能执行一次,再次点击,动画不执行,需要再次刷新页面才能执行。
我的代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
display: flex;
width: 500px;
height: 500px;
background-color: #3faf82;
position: relative;
}
.box .middle {
width: 200px;
height: 120px;
/* background-color: #ff3040; */
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
transform-style: preserve-3d;
cursor: pointer;
}
.box .middle div {
width: 200px;
height: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 2px 2px 5px 0px #000;
}
.box .middle div:nth-child(1) {
transform-origin: 100px 10px;
animation: one 0.5s linear forwards;
}
.box .middle div:nth-child(2) {
opacity: 1;
animation: two 0.5s linear forwards;
}
.box .middle div:nth-child(3) {
transform-origin: 100px 10px;
animation: three 0.5s linear forwards;
}
@keyframes one {
70% {
transform: translateY(50px);
}
100% {
transform: translateY(50px) rotateZ(45deg);
}
}
@keyframes two {
70% {
opacity: 1;
transform: scaleX(0.8);
}
100% {
opacity: 0;
transform: scaleX(0.8);
}
}
@keyframes three {
70% {
transform: translateY(-50px);
}
100% {
transform: translateY(-50px) rotateZ(135deg);
}
}
.no-animation {
animation: none !important;
}
</style>
<div class="box">
<div class="middle">
<div class="no-animation"></div>
<div class="no-animation"></div>
<div class="no-animation"></div>
</div>
</div>
<script>
let middle = document.querySelector('.middle')
let div = document.querySelectorAll('.middle div')
let i = 0
middle.addEventListener('click', function () {
for (i = 0; i < div.length; i++) {
/* console.log(div[i].classList); */
div[i].classList.remove('no-animation')
}
middle.addEventListener('click', function () {
for (i = 0; i < div.length; i++) {
div[i].style.animationDirection = 'reverse'
div[i].style.animationIterationCount = 1
div[i].style.animationDuration = '1.5s'
}
})
}
)
</script>
目前,还不知道怎么解决这个问题~
后续继续深入学习js后,再来解决!
如果有大佬能解决,求帮!求留言!!!