Блог

Главная - Вопросы по программированию - Сохранение состояния анимации (ключевых кадров) при удалении в обратном направлении с той же анимацией в исходное состояние

Сохранение состояния анимации (ключевых кадров) при удалении в обратном направлении с той же анимацией в исходное состояние

#html #css #css-animations

#HTML #css #css-анимации

Вопрос:

Я получил анимацию, с которой я сохраняю состояние animation-fill-mode: forwards; . Я бы хотел, чтобы он анимировал тот же путь обратно к своему источнику, как только класс для него будет удален. Как бы я это сделал?

Это то, что я получил

 document.querySelector(".js-toggle-animation").addEventListener("click", () => {
  document.querySelector(".container").classList.toggle("container--is-active");
});  
 body {
  background-color: #ededed;
}

.container {
  margin: 0 auto;
  width: 20rem;
  padding: 2rem;
  background-color: crimson;
  overflow: hidden;
}

.container__toggle-action {
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  border: none;
}

.container__content {
  position: relative;
  height: 20rem;
  background-color: lighten(crimson, 20%);
}

.information-block {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  height: 60%;
  padding: 1.875rem;
  background-color: #ffffff;
  transform: translateY(0);
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  animation-direction: reverse;
  animation-duration: 3s;
  animation-fill-mode: backwards;
}

.container--is-active .information-block {
  animation: smooth-in 320ms ease forwards;
}

@keyframes smooth-in {
  10% {
    bottom: 0;
    height: 60%;
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    opacity: 1;
    visibility: visible;
  }
  70% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    transform: translateY(0);
  }
  100% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: -2rem;
    margin-left: -2rem;
    padding-right: calc(1.875rem   2rem);
    padding-left: calc(1.875rem   2rem);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}  
 <div class="container">
  <button class="container__toggle-action js-toggle-animation">toggle animation</button>

  <div class="container__content">
    <div class="information-block">
      <h2>headline</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque obcaecati debitis nihil ratione dicta quaerat, dolores quis laboriosam quae recusandae!</p>
    </div>
  </div>
</div>

Ответ №1:

Как вы можете видеть, я добавляю обратную анимацию, поэтому при повторном нажатии div исчезнет

 document.querySelector(".js-toggle-animation").addEventListener("click", () => {
  if( document.querySelector(".container").classList.contains('container--is-active')){
  document.querySelector(".container").classList.toggle("container--is-not-active");
  document.querySelector(".container").classList.remove("container--is-active");
  }else if( document.querySelector(".container").classList.contains('container--is-not-active')){
  document.querySelector(".container").classList.toggle("container--is-active");
  document.querySelector(".container").classList.remove("container--is-not-active");
  }else{
  document.querySelector(".container").classList.toggle("container--is-active");
  }
});  
 body {
  background-color: #ededed;
}

.container {
  margin: 0 auto;
  width: 40rem;
  padding: 2rem;
  background-color: crimson;
  overflow: hidden;
}

.container__toggle-action {
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  border: none;
}

.container__content {
  position: relative;
  height: 20rem;
  background-color: lighten(crimson, 20%);
}

.information-block {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  height: 60%;
  padding: 1.875rem;
  background-color: #ffffff;
  transform: translateY(0);
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  animation-direction: reverse;
  animation-duration: 3s;
  animation-fill-mode: backwards;
}

.container--is-active .information-block {
  animation: smooth-in 320ms ease forwards;
}
.container--is-not-active .information-block {
  animation: smooth-in-reverse 320ms ease forwards;
}

@keyframes smooth-in {
  10% {
    bottom: 0;
    height: 60%;
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    opacity: 1;
    visibility: visible;
  }
  70% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    transform: translateY(0);
  }
  100% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: -2rem;
    margin-left: -2rem;
    padding-right: calc(1.875rem   2rem);
    padding-left: calc(1.875rem   2rem);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  }
  @keyframes smooth-in-reverse {
  10% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: -2rem;
    margin-left: -2rem;
    padding-right: calc(1.875rem   2rem);
    padding-left: calc(1.875rem   2rem);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  70% {
    bottom: -2rem;
    height: calc(60%   4rem);
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    transform: translateY(0);
  }
  100% {
    bottom: 0;
    height: 60%;
    margin-right: 0;
    margin-left: 0;
    padding-right: calc(1.875rem);
    padding-left: calc(1.875rem);
    opacity: 1;
    visibility: none;
   
  }
}  
 <div class="container">
  <button class="container__toggle-action js-toggle-animation">toggle animation</button>

  <div class="container__content">
    <div class="information-block">
      <h2>headline</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque obcaecati debitis nihil ratione dicta quaerat, dolores quis laboriosam quae recusandae!</p>
    </div>
  </div>
</div>

Комментарии:

1. Это немного запутанно из-за необходимости добавлять a для добавления класса при удалении элемента. Есть ли другой способ?

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

3. вы нашли другой способ?