Почему мой анимационный элемент движется по диагонали?

Question

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

#curtainLeft{
position: absolute;
z-index: 3;
top:0;
left: -1000px;
height:100%;
animation-name:left;
animation-duration: 1.5s;
animation-play-state: paused;

}
@keyframes left {
from {left: 0px;}
to {left: -1000px;}
}

#curtainRight{
position:absolute;
z-index: 3;
top:0;
right:-1000px;
animation-name:right;
animation-duration: 1.5s;
animation-play-state: paused;

}
@keyframes right {
from {right: 0px;}
to {right: -1000px;}
}

.runAnimation{
animation-play-state: running;
}


<button id="directionsButton" onclick="myFunction()">Begin</button>
</div>
<div id="curtainLeft">
    <img src="./assets/images/curtainLeft.png">
</div>
<div id="curtainRight">
    <img src="./assets/images/curtainRight.png">
</div>



function myFunction(){

$("#curtainRight").toggle("runAnimation");
$("#curtainLeft").toggle("runAnimation")
$("#directionsButton").remove();
audio.play();
}

Answer 1

Сначала я подумал, что это ошибка, но потом я заметил, что класс runAnimation никогда не был назначен элементам div, а затем я увидел, что сама анимация полностью обрабатывается js. Ответ очень простой. Вы неправильно использовали .toggle() - его функция для скрытия / отображения элементов, .toggleClass() - это то, что вы хотите.

Вам также необходимо добавить !importantдля animation-play-state: running потому что это стиль для класса, а animation-play-state: paused; это стиль для идентификатора, который имеет более высокий приоритет. Или вы можете написать его как #curtainLeft.runAnimation {...}, тогда он будет иметь более высокий приоритет, и вам не понадобится !important. И, очевидно, это хорошая идея, чтобы обернуть ваши шторы в общего родителя, который будет иметь overflow: hidden; и, вероятно, pointer-events: none;. Я просто использовал body во фрагменте

$('#directionsButton').click(() => {
  $("#curtainRight").toggleClass("runAnimation");
  $("#curtainLeft").toggleClass("runAnimation")
  $("#directionsButton").remove();
});

body {overflow: hidden;}

#curtainLeft,
#curtainRight {
  height: 100%;
  width: 50%;
  position: absolute;
  z-index: 3;
  top: 0;
  animation-duration: 1.5s;
  animation-play-state: paused;
}

#curtainLeft {
  left: -1000px;
  background: firebrick;
  animation-name: left;
}

#curtainRight {
  right: -1000px;
  background: rebeccapurple;
  animation-name: right;
}

#directionsButton {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 10000;
}

.runAnimation {
  animation-play-state: running !important;
}

@keyframes left {
  from {left: 0;}
  to {left: -1000px;}
}

@keyframes right {
  from {right: 0;}
  to {right: -1000px;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="directionsButton">Begin</button>
<div id="curtainLeft"></div>
<div id="curtainRight"></div>