Saya mencoba menghidupkan halaman web saya dengan membuka sepasang tirai ke samping. Saya telah mencapai hasil ini menggunakan CSS dan dengan memindahkan posisi div dari layar. Namun, ketika saya memprogram tombol untuk mengubah status animasi dari dijeda menjadi berjalan, div bergerak secara diagonal dari layar DAN memudar saat melakukannya. Mengapa?

#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();
}
1
Anthony M 22 Oktober 2019, 01:37

1 menjawab

Jawaban Terbaik

Pertama, saya pikir itu bug, tetapi kemudian saya perhatikan, bahwa kelas runAnimation tidak pernah ditugaskan ke div, dan kemudian saya melihat bahwa animasi itu sendiri sepenuhnya ditangani oleh js. Jawabannya sangat sederhana. Anda menyalahgunakan .toggle() - fungsinya untuk menyembunyikan/menampilkan elemen, .toggleClass() adalah yang Anda inginkan.

Anda juga perlu menambahkan !important untuk animation-play-state: running karena ini adalah gaya untuk kelas dan animation-play-state: paused; adalah gaya untuk id yang memiliki prioritas lebih tinggi. Atau Anda dapat menulisnya seperti #curtainLeft.runAnimation {...} maka itu akan memiliki prioritas yang lebih tinggi dan Anda tidak perlu !important. Dan jelas merupakan ide yang baik untuk membungkus gorden Anda menjadi induk umum yang akan memiliki overflow: hidden; dan mungkin pointer-events: none;. Saya baru saja menggunakan body dalam cuplikan

$('#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>
1
Cheslab 22 Oktober 2019, 03:00