Плавное удаление анимации из div - PullRequest
Новая
       10

Плавное удаление анимации из div

0 голосов
/ 13 декабря 2018

Я использую @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 
      }
  }

1 Ответ

0 голосов
/ 13 декабря 2018

Используйте переход, как показано ниже: 

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>
...