मैं यह वार्ता देख रहा हूँ: https://www.youtube.com/watch?v=cCOL7MC4Pl0< /ए>

स्पीकर जेएस कार्यों और डीओएम प्रतिपादन के बारे में बात करता है। वह निम्नलिखित उदाहरण देता है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Task</title>

    <style>
      * {
        box-sizing: border-box;
      }

      .box {
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script>
      var box = document.querySelector(".box");

      box.addEventListener("click", () => {
        box.style.transform = "translateX(500px)";
        box.style.transition = "transform 1s ease-in-out";
        box.style.transform = "translateX(250px)";
      });
    </script>
  </body>
</html>

और ऑब्जेक्ट को (क्लिक इवेंट पर) स्थिति 0 से स्थिति 500px तक, और फिर 500px से 250px तक चेतन करने का प्रयास करता है। दूसरे शब्दों में, बाएं से दाएं और दाएं से मध्य तक।

वह निम्नलिखित कोड का उपयोग करता है:

var box = document.querySelector(".box");
box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";
  box.style.transition = "transform 1s ease-in-out";
  box.style.transform = "translateX(250px)";
});

फिर उन्होंने समझाया कि यह अपेक्षा के अनुरूप काम क्यों नहीं करता - क्योंकि ब्राउज़र एनीमेशन को प्रस्तुत/प्रदर्शन करने से पहले सभी गणना करेगा। यहाँ सब अच्छा है।

हालांकि, उनका कहना है कि वह अंतिम box.style.transform = "translateX(250px)"; को डबल (नेस्टेड) ​​requestAnimationFrame() कॉल में लपेटकर समस्या का समाधान करते हैं। जब मैंने ऐसा करने की कोशिश की, तो उसने बिल्कुल पहले जैसा ही काम किया। यह काम नहीं किया। यहाँ कोड है:

box.style.transform = "translateX(500px)";
box.style.transition = "transform 1s ease-in-out";
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    box.style.transform = "translateX(250px)";
  });
});

मुझे यहां क्या समझ नहीं आ रहा है? ब्राउजर को पहले 500 पीएक्स में ट्रांसफॉर्म ऑपरेशन कैसे करें, और फिर इसे वापस 250 पीएक्स में कैसे बदलें?

1
Dragos Strugar 28 सितंबर 2019, 13:07

2 जवाब

सबसे बढ़िया उत्तर

वीडियो में एक गलती थी।

यह कोड का सही टुकड़ा है:

box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.transition = "transform 1s ease-in-out";
      box.style.transform = "translateX(250px)";
    });
  });
});
1
Dragos Strugar 28 सितंबर 2019, 17:08

दूसरे कथन में इस एक सेटटाइमआउट का उपयोग करें अन्यथा दोनों कथन एक-एक करके बहुत तेजी से निष्पादित होते हैं, इसलिए इसे वह वास्तविक नहीं मिला जो आप चाहते हैं।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Task</title>

    <style>
      * {
        box-sizing: border-box;
      }

      .box {
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script>
      var box = document.querySelector(".box");

      box.addEventListener("click", () => {
        box.style.transform = "translateX(500px)";
        box.style.transition = "transform 1s ease-in-out";
        setTimeout(function(){
        box.style.transform = "translateX(250px)";
        },1000);
      });
    </script>
  </body>
</html>

पिछला बयान,

0
Mahesh S 28 सितंबर 2019, 13:32