анимация работает один раз при открытии ящика корзины, а затем не работает - PullRequest
Новая
       3

анимация работает один раз при открытии ящика корзины, а затем не работает

0 голосов
/ 25 февраля 2020

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

У меня есть две простые CSS анимации для открытия и закрытия корзины. 

.animate-close-cart {
  animation: closeCart 0.2s 0s 1 linear forwards;
}
@keyframes closeCart {
  from {
    transform: translateX(-35%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-open-cart {
  animation: openCart 0.2s 0s 1 linear forwards;
}
@keyframes openCart {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-35%);
  }
}

после нажатия на кнопку моей корзины я добавляю или удаляю соответствующий класс:

Открытие корзины: 

       value: function _openMiniCart() {
         var mainWrapper = document.getElementById("main_wrapper");
         mainWrapper.classList.remove("animate-close-cart");
         mainWrapper.classList.add("animate-open-cart");
       }

Закрытие корзины: 

       value: function _closeMiniCart() {
         var mainWrapper = document.getElementById("main_wrapper");
         mainWrapper.classList.remove("animate-open-cart");
         mainWrapper.classList.add("animate-close-cart");
       }

Блок main_wrapper оборачивается вокруг всей моей веб-страницы: 

<body>
 <div id="main_wrapper">
   // header, template, page contents etc.
 <div/>
</body>

Открывая корзину, в которой воспроизводится анимация, веб-страница перемещается к осталось показывать корзину. Отлично. При закрытии корзины проигрывается анимация, веб-страница перемещается назад вправо, скрывая корзину.

Затем ...

При повторном открытии веб-страницы просто прыгает без анимации влево, показывая корзину, но закрывая ее, она воспроизводит анимацию и движется обратно вправо.

При каждом открытии после первого начального открытия веб-страница всегда сразу переходит на -35%.

Я не знаю, как отладить это или что может быть причиной этой проблемы.

edit:

С помощью CSS преобразуйте ту же ошибку, где она предлагает только плавный переход на первую открытую корзину, все другие открытые корзины сразу же перепрыгивают: 

#main_wrapper {
  transition: transform 0.2s;
}

.animate-close-cart {
  transform: translateX(0);
}

.animate-open-cart {
  transform: translateX(0);
}

1 Ответ

0 голосов
/ 25 февраля 2020

Итак, когда вы говорите, что вся страница движется, вы имеете в виду, что вы немного сдвигаете экран основного контента? Или вы позволяете блокам держать все видимым с обеих сторон, если они оба доступны? Я не уверен, что правильно понимаю намерение, но вот пример эффекта, который я использовал в прошлом, если он помогает достичь вашей цели. В противном случае воспроизводимый пример ваших болевых точек, а не просто фрагментов, скорее всего, поможет вам найти решение. Ура. 

toggleMe = () => {

  const side = document.getElementById('side-wrapper');
  
  side.classList.toggle('slide-me');

}
#main-wrapper {
  height: 80vh;
  width: 80vw;
  margin: 2rem;
  border: red 5px dashed;
  display: flex;
  flex-direction: row;
  overflow: hidden; /* make this visible if you want to see in action */
}

#section-wrapper, #side-wrapper {
  outline: #fff 3px dashed;
  outline-offset: -10px;
}

#section-wrapper {
  height: 100%;
  width: 100%;
  background-color: #00f;
}

#side-wrapper {
  height: 100%;
  width: 350px;
  background-color: #0f0;
  margin-right: -350px;
  transition: margin-right 1s ease-in-out;
}

.slide-me {
  margin-right: 0 !important;
}

#example input:checked:after {
  content: 'SIDE IS OPEN';
  display: inline-block;
  margin-left: 1rem;
  color: green;
}
<label id="example">
  Click to toggle side slide
  <input type="checkbox" onclick="toggleMe()">
</label>

<div id="main-wrapper">
  <div id="section-wrapper"></div>
  <div id="side-wrapper"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...