点击按钮在事件完成后。

huangapple
go评论102阅读模式
英文:

Click button after event finished

问题

以下是翻译好的部分：

为什么在以下代码中我无法以编程方式单击按钮来再次翻译div？

  1. <div class="div1"></div>
  2. <button onclick="play()">播放</button>
  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   transition: transform 1s;
  9.   transform: translateX(100px);
  10. }
  1. const div1 = document.getElementsByClassName("div1")[0];
  3. div1.addEventListener("transitionend", callback);
  4. // 为什么这个不起作用？
  5. // div1.addEventListener("transitionend", play);
  7. function play() {
  8.   div1.classList.add("play");
  9. }
  11. function callback() {
  12.   div1.classList.remove("play");
  13.   // 或者这个？
  14.   // play();
  15. }
英文:

Why in the following code I can not click the button programmatically to translate the div again ?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const div1 = document.getElementsByClassName(&quot;div1&quot;)[0];
  3. div1.addEventListener(&quot;transitionend&quot;, callback);
  4. // Why this one does not work?
  5. // div1.addEventListener(&quot;transitionend&quot;, play);
  7. function play() {
  8.   div1.classList.add(&quot;play&quot;);
  9. }
  11. function callback() {
  12.   div1.classList.remove(&quot;play&quot;);
  13.   // or this one?
  14.   // play();
  15. }

<!-- language: lang-css -->

  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   transition: transform 1s;
  9.   transform: translateX(100px);
  10. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
  2. &lt;button onclick=&quot;play()&quot;&gt;Play&lt;/button&gt;

<!-- end snippet -->

答案1

得分: 1

没有立即改变类别的效果。

这就是为什么您应该使用 setTimeOut 来再次调用 play 的原因。

  1. const div1 = document.getElementsByClassName("div1")[0];
  3. div1.addEventListener("transitionend", callback);
  5. function play() {
  6.   div1.classList.add("play");
  7. }
  9. function callback() {
  10.   div1.classList.remove("play");
  11.   setTimeout(play);
  12. }

您也可以使用 CSS 动画以更清晰的代码获得相同的效果。

  1. const div1 = document.getElementsByClassName("div1")[0];
  3. function play() {
  4.   div1.classList.add("play");
  5. }
  7. /* CSS 部分未翻译 */

希望这对您有所帮助。

英文:

there is no effect to changing the class instantly.

that is why you should use setTimeOut to call play again

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. const div1 = document.getElementsByClassName(&quot;div1&quot;)[0];
  3. div1.addEventListener(&quot;transitionend&quot;, callback);
  5. function play() {
  6.   div1.classList.add(&quot;play&quot;);
  7. }
  9. function callback() {
  10.   div1.classList.remove(&quot;play&quot;);
  11.   setTimeout(play);
  12. }

<!-- language: lang-css -->

  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   transition: transform 1s;
  9.   transform: translateX(100px);
  10. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
  2. &lt;button onclick=&quot;play()&quot;&gt;Play&lt;/button&gt;

<!-- end snippet -->

you might also use css animation to get the same effect with cleaner code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const div1 = document.getElementsByClassName(&quot;div1&quot;)[0];
  3. function play() {
  4.   div1.classList.add(&quot;play&quot;);
  5. }

<!-- language: lang-css -->

  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   animation: go-right 1s infinite;
  9. }
  11. @keyframes go-right {
  12.   100%{
  13.     transform: translateX(100px);
  14.   }
  15. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
  2. &lt;button onclick=&quot;play()&quot;&gt;Play&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 0

当您单击“播放”按钮时，将调用play函数并将“play”类添加到div1。这会触发一个过渡，当过渡结束时，会调用回调函数，该函数会移除“play”类。

如果您希望通过按钮点击来切换翻译开/关，请修改play函数以根据其是否存在来添加或移除“play”类。

  1. function play() {
  2.   if (div1.classList.contains("play")) {
  3.     div1.classList.remove("play");
  4.   } else {
  5.     div1.classList.add("play");
  6.   }
  7. }
英文:

When you click the "Play" button, the play function is called and it adds the "play" class to div1. This triggers a transition and when the transition ends, the callback function is called, which removes the "play" class.

If you want to toggle the translation on/off with button click modify the play function to add or remove the "play" class based on whether it's there

  1. function play() {
  2.   if (div1.classList.contains(&quot;play&quot;)) {
  3.     div1.classList.remove(&quot;play&quot;);
  4.   } else {
  5.     div1.classList.add(&quot;play&quot;);
  6.   }
  7. }

答案3

得分: 0

你应该在去除play类后停止动画，然后在零延迟后（允许浏览器重新渲染并重新启动动画）再次添加play类：

  1. if (div1.classList.contains('play')) {
  2.   div1.classList.remove('play');
  3.   setTimeout(() => div1.classList.add('play'));
  4.   return;
  5. }
  1. const div1 = document.getElementsByClassName("div1")[0];
  3. div1.addEventListener("transitionend", callback);
  5. function play() {
  6.   if (div1.classList.contains('play')) {
  7.     div1.classList.remove('play');
  8.     setTimeout(() => div1.classList.add('play'));
  9.     return;
  10.   }
  11.   div1.classList.add("play");
  12. }
  14. function callback() {
  15.   div1.classList.remove("play");
  16. }
  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   transition: transform 1s;
  9.   transform: translateX(100px);
  10. }
  1. <div class="div1"></div>
  2. <button onclick="play()">Play</button>
英文:

You should stop the animation with removing the play class and start it again with adding the play class after a zero timeout (that allows the browser to re-render and start the animation fresh):

  1.   if(div1.classList.contains(&#39;play&#39;)){
  2.     div1.classList.remove(&#39;play&#39;);
  3.     setTimeout(()=&gt;div1.classList.add(&#39;play&#39;));
  4.     return;
  5.   }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const div1 = document.getElementsByClassName(&quot;div1&quot;)[0];
  3. div1.addEventListener(&quot;transitionend&quot;, callback);
  4. // Why this one does not work?
  5. // div1.addEventListener(&quot;transitionend&quot;, play);
  7. function play() {
  8.   if(div1.classList.contains(&#39;play&#39;)){
  9.     div1.classList.remove(&#39;play&#39;);
  10.     setTimeout(()=&gt;div1.classList.add(&#39;play&#39;));
  11.     return;
  12.   }
  13.   div1.classList.add(&quot;play&quot;);
  14.   
  15. }
  17. function callback() {
  18.   div1.classList.remove(&quot;play&quot;);
  19.   // or this one?
  20.   // play();
  21. }

<!-- language: lang-css -->

  1. .div1 {
  2.   width: 200px;
  3.   height: 100px;
  4.   background-color: limegreen;
  5. }
  7. .play {
  8.   transition: transform 1s;
  9.   transform: translateX(100px);
  10. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
  2. &lt;button onclick=&quot;play()&quot;&gt;Play&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 17:36:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76874467.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定