jquery - 为什么我的动画 div 沿对 Angular 线移动？

Question

我试图通过打开一对窗帘来使我的网页动画化。我使用 CSS 并通过将 div 的位置移出屏幕来实现了这个结果。但是，当我对一个按钮进行编程以将动画状态从暂停切换为运行时，div 沿对 Angular 线移出屏幕并在这样做时淡出。为什么？

#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()是你想要的。

您还需要为 animation-play-state: running 添加 !important 因为它是类的样式，而 animation-play- state: paused; 是优先级较高的 id 的样式。或者你可以像 #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>