मेरा एनिमेटेड div तिरछे क्यों घूम रहा है?

Question 1

मैं एक जोड़ी पर्दों को किनारे की ओर खोलकर अपने वेब पेज को चेतन करने का प्रयास कर रहा हूं। मैंने सीएसएस का उपयोग करके और स्क्रीन से divs की स्थिति को स्थानांतरित करके यह परिणाम प्राप्त किया है। हालांकि, जब मैं एनीमेशन स्थिति को रोकने से चलने के लिए टॉगल करने के लिए एक बटन प्रोग्राम करता हूं, तो divs स्क्रीन से तिरछे चले जाते हैं और ऐसा करते समय फीका हो जाते हैं। क्यों?

#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();
}

jquery css animation

1

Anthony M 22 अक्टूबर 2019, 01:37

Answer

सबसे पहले, मैंने सोचा कि यह एक बग है, लेकिन फिर मैंने देखा, कि runAnimation वर्ग को divs को कभी भी असाइन नहीं किया गया था, और फिर मैंने देखा कि एनीमेशन स्वयं पूरी तरह से जेएस द्वारा नियंत्रित किया गया था। जवाब बहुत आसान है। आपने .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>

1

Cheslab 22 अक्टूबर 2019, 03:00

Question 2

सबसे पहले, मैंने सोचा कि यह एक बग है, लेकिन फिर मैंने देखा, कि runAnimation वर्ग को divs को कभी भी असाइन नहीं किया गया था, और फिर मैंने देखा कि एनीमेशन स्वयं पूरी तरह से जेएस द्वारा नियंत्रित किया गया था। जवाब बहुत आसान है। आपने .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>

1

Cheslab 22 अक्टूबर 2019, 03:00

मेरा एनिमेटेड div तिरछे क्यों घूम रहा है?

1 उत्तर

संबंधित सवाल

नए सवाल

jquery