Question

我正在使用@keyframes在页面上制作动画，该页面在滚动时将类附加到该div并在我向上滚动时进行动画处理。我正在移除它。但是当它被删除时，它是突然的。我想使动画删除像应用动画一样平滑。

出于演示目的，我在动画中附加了剥离后的版本和codepen链接，当您退出悬停状态时，动画不平滑。如果我没有悬停，如何使我的动画恢复正常？ HTML

<div class="box">
  <img src="https://placeimg.com/250/250/animals" alt="">
</div>

css

.box{
  width: 300px;
  height: 300px;
  background: #DDD1B9;
  overflow: hidden;
  display: flex;
 justify-content: center;
  border-radius: 50px;
  transform: rotate(80deg);
}
img{
transform: rotate(-80deg);
}
.box:hover{
  animation-name: hoverer , imx;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  height: 200px;
}
@keyframes hoverer{
  100%{
    width: 50%;
    transform: rotate(0deg);
  }
}
@keyframes imx{
  100%{
    background: black
  }
}

编辑：添加和删除div的功能摘录如下

  fixedHeader: function(event){
      const header = document.getElementsByClassName("logo")[0]
      this.y = event.clientY
      if(this.y >= 200){
          header.classList.add("fixed") //Add the div with animate
      }else if(this.y < 200){
          header.classList.remove("fixed") //Remove the div but animated back instead of abruptly 
      }
  }

Answer 1

使用如下所示的翻译：

function change() {
  document.querySelector('.box').classList.toggle('fixed');
}

.box {
  width: 300px;
  height: 300px;
  background: #DDD1B9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-radius: 50px;
  transform: rotate(80deg);
  transition: 0.5s all;
}

img {
  transform: rotate(-80deg);
}

.box.fixed {
  width: 50%;
  transform: rotate(0deg);
  height: 200px;
  background: black
}

<div class="box">
  <img src="https://placeimg.com/250/250/animals" alt="">
</div>

<button onClick="change()">toggle class</button>

从div平滑删除动画

1 个答案: