代码之家 › 专栏 › 技术社区 › jack huang

在javascript上停止第一个动画后,我似乎无法开始第二个动画

animation javascript

jack huang · 技术社区 · 2 年前

目前,我正在尝试在停止第一个动画后开始第二个动画。第一个动画确实停止了,但第二个动画无法开始。我不知道我的代码出了什么问题,也不知道如何测试哪一部分出了问题。

function flyRocket() {
    let animatedElement = document.querySelector('.rocket');
    animatedElement.style.animation = 'none';
    moveRocket();
}

function moveRocket() {
    let movingElement = document.querySelector('.rocket');
    movingElement.classList.add('move-up-animation');
}

#Rocket {
  height: 100px;
  width: 50px;
}

.rocket {
  position: relative;
  animation: animate 0.5s ease infinite;
}

@keyframes animate {
  0%, 100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
}

.rocket::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 50px;
    background: linear-gradient(#00d0ff, transparent);
}

.rocket::after {
    content: '';
    position: absolute;
    top: 5;
    left: 50%;
    transform: translateX(-50%);    
    width: 10px;
    height: 50px;
    background: linear-gradient(#00d0ff, transparent);
    filter: blur(20px);
}

.move-up-animation {
    animation: moveUpAnimation 2s ease forwards;
}

@keyframes moveUpAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

<div class='scene'>
    <div class='rocket'>
        <img id='Rocket' src='rocket.png'>
    </div>
</div>

任何帮助都将不胜感激。

1 回复 | 直到 2 年前

Jaromanda X 2 年前

从中分割动画 .rocket 选择器到另一个类-随便调用它,然后将该类添加到元素中。单击,移除该类并添加您现在添加的类

这样地

function flyRocket() {
    let animatedElement = document.querySelector('.rocket');
    animatedElement.classList.remove('up-down-animation');
    moveRocket();
}

function moveRocket() {
    let movingElement = document.querySelector('.rocket');
    movingElement.classList.add('move-up-animation');
}
document.body.addEventListener('click', flyRocket);

#Rocket {
  height: 100px;
  width: 50px;
}

.rocket {
  position: relative;
}
.up-down-animation {
  animation: animate 0.5s ease infinite;
}

@keyframes animate {
  0%, 100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
}

.rocket::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 50px;
    background: linear-gradient(#00d0ff, transparent);
}

.rocket::after {
    content: '';
    position: absolute;
    top: 5;
    left: 50%;
    transform: translateX(-50%);    
    width: 10px;
    height: 50px;
    background: linear-gradient(#00d0ff, transparent);
    filter: blur(20px);
}

.move-up-animation {
    animation: moveUpAnimation 2s ease forwards;
}

@keyframes moveUpAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

<div class='scene'>
    <div class='rocket up-down-animation'>
        <img id='Rocket' src='rocket.png'>
    </div>
</div>