Question

我在CSS中创建了关键帧动画，但我希望能够对其进行切换。

我试图像过渡动画一样使用JS classList.toggle切换它，但是它只是删除了该类而不对其进行动画处理。

我发现的唯一解决方案是创建两个关键帧动画，一个用于“输入”，另一个用于“输出”。我想知道是否有更简单的方法来切换它？

提琴：https://jsfiddle.net/ViniciusBortoletto/q13un4go/1/

HTML

<div class="button">Animate</div>
<div class="box"></div>

CSS

.button {
  width: 100px;
  padding: 10px;
  text-align: center;
  border: 1px solid #212121;
  margin-bottom: 10px;
}

.box {
  height: 0vh;
  width: 100vw;
  background: #212121;

}

.boxAnimation {
  animation: boxAnimation 1s ease-in-out forwards;
}

@keyframes boxAnimation {
  0% {
  height: 0vh;
  }
  70% {
  height: 70vh;
  }
  100% {
  height: 60vh;
  }

}

JS

let button = document.querySelector('.button');
let box = document.querySelector('.box');

button.addEventListener('click', function() {
  box.classList.toggle('boxAnimation');
});

Answer 1

创建一个包含:not(.boxAnimation)的CSS定义，以反转动画：

.button {
  width: 100px;
  padding: 10px;
  text-align: center;
  border: 1px solid #212121;
  margin-bottom: 10px;
}

.box {
  height: 0vh;
  width: 100vw;
  background: #212121;
}
.box.boxAnimation{
  animation: boxAnimation 1s ease-in-out forwards;
}
.box:not(.boxAnimation){  
  animation: boxAnimation 1s ease-in-out backwards;
}

@keyframes boxAnimation {
  0% {
  height: 0vh;
  }
  70% {
  height: 70vh;
  }
  100% {
  height: 60vh;
  }

}

请注意，这将在创建元素时为其设置动画。

Answer 2

.box.boxAnimation{
  animation: boxAnimation 1s ease-in-out forwards;
}
.box.boxAnimation.boxAnimationBackwards{  
  animation: boxAnimation 1s ease-in-out backwards;
}

在您的JS中，您可以测试.box是否已经具有.boxAnimation，如果是，则添加.boxAnimationBackwards，并在1s之后删除两个类；如果没有，添加.boxAnimation;

有没有办法切换CSS动画？

2 个答案: