Как отменить ключевой кадр после его применения - PullRequest
Новая
       66

Как отменить ключевой кадр после его применения

1 голос
/ 25 мая 2020

Вот анимация, которую я использую, и код javascript для добавления соответствующих классов при нажатии на определенные кнопки c. Работает нормально. 

$(document).ready(() => {

	$('.show').on('click', () => {
  	$('.child').addClass('show');
  })
  
  $('.hide').on('click', () => {
  	$('.child').addClass('hide');
  })
  
})
.child{
  width:0;
  height:0;
  border:2px solid red;
  overflow:hidden;
}

.child.show{
   animation-name: expandit;
   animation-duration: 1s;
   width:100px;
   height:100px;
}

.child.hide{
   animation-name: hideit;
   animation-duration: 1s;
   animation-direction: reverse;
}


@keyframes expandit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

@keyframes hideit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <a class="show" href="#">Show</a>
  <a class="hide" href="#">Hide</a>
  <div class="child">
    
  </div>
</div>

Теперь пользователь нажимает кнопку закрытия. Я хотел бы вернуться к ширине 0, используя ключевые кадры. Как я могу это сделать?

Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 26 мая 2020

Вы ищете свойство animation-fill-mode, которое позволяет сохранить конечное состояние применяемой анимации как , задокументированное на w3 c. 

$(document).ready(() => {

  $('.show').on('click', () => {
    $('.child').addClass('show');
  })

  $('.hide').on('click', () => {
    $('.child').addClass('hide');
  })

})
.child {
  width: 0;
  height: 0;
  border: 2px solid red;
  overflow: hidden;
}

.child.show {
  animation-name: expandit;
  animation-duration: 1s;
  width: 100px;
  height: 100px;
}

.child.hide {
  animation-name: hideit;
  animation-duration: 1s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

@keyframes expandit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

@keyframes hideit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <a class="show" href="#">Show</a>
  <a class="hide" href="#">Hide</a>
  <div class="child">

  </div>
</div>

Однако, если вы хотите вернуться в «реальное начальное состояние», где height: 0;, потребуется дополнительный ключевой кадр на 99,99%. чтобы скрыть эту вторую анимацию. Не стесняйтесь оставлять комментарии, если у вас возникнут дополнительные вопросы.

...