英文:
Click button after event finished
问题
以下是翻译好的部分：
为什么在以下代码中我无法以编程方式单击按钮来再次翻译div？
<div class="div1"></div>
<button onclick="play()">播放</button>
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s;
transform: translateX(100px);
}
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
// 为什么这个不起作用？
// div1.addEventListener("transitionend", play);
function play() {
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
// 或者这个？
// play();
}
英文:
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 -->
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
// Why this one does not work?
// div1.addEventListener("transitionend", play);
function play() {
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
// or this one?
// play();
}
<!-- language: lang-css -->
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s;
transform: translateX(100px);
}
<!-- language: lang-html -->
<div class="div1"></div>
<button onclick="play()">Play</button>
<!-- end snippet -->
答案1
得分: 1
没有立即改变类别的效果。
这就是为什么您应该使用 setTimeOut 来再次调用 play 的原因。
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
function play() {
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
setTimeout(play);
}
您也可以使用 CSS 动画以更清晰的代码获得相同的效果。
const div1 = document.getElementsByClassName("div1")[0];
function play() {
div1.classList.add("play");
}
/* 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 -->
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
function play() {
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
setTimeout(play);
}
<!-- language: lang-css -->
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s;
transform: translateX(100px);
}
<!-- language: lang-html -->
<div class="div1"></div>
<button onclick="play()">Play</button>
<!-- 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 -->
const div1 = document.getElementsByClassName("div1")[0];
function play() {
div1.classList.add("play");
}
<!-- language: lang-css -->
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
animation: go-right 1s infinite;
}
@keyframes go-right {
100%{
transform: translateX(100px);
}
}
<!-- language: lang-html -->
<div class="div1"></div>
<button onclick="play()">Play</button>
<!-- end snippet -->
答案2
得分: 0
当您单击“播放”按钮时，将调用play函数并将“play”类添加到div1。这会触发一个过渡，当过渡结束时，会调用回调函数，该函数会移除“play”类。
如果您希望通过按钮点击来切换翻译开/关，请修改play函数以根据其是否存在来添加或移除“play”类。
function play() {
if (div1.classList.contains("play")) {
div1.classList.remove("play");
} else {
div1.classList.add("play");
}
}
英文:
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
function play() {
if (div1.classList.contains("play")) {
div1.classList.remove("play");
} else {
div1.classList.add("play");
}
}
答案3
得分: 0
你应该在去除play类后停止动画，然后在零延迟后（允许浏览器重新渲染并重新启动动画）再次添加play类：
if (div1.classList.contains('play')) {
div1.classList.remove('play');
setTimeout(() => div1.classList.add('play'));
return;
}
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
function play() {
if (div1.classList.contains('play')) {
div1.classList.remove('play');
setTimeout(() => div1.classList.add('play'));
return;
}
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
}
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s;
transform: translateX(100px);
}
<div class="div1"></div>
<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):
if(div1.classList.contains('play')){
div1.classList.remove('play');
setTimeout(()=>div1.classList.add('play'));
return;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const div1 = document.getElementsByClassName("div1")[0];
div1.addEventListener("transitionend", callback);
// Why this one does not work?
// div1.addEventListener("transitionend", play);
function play() {
if(div1.classList.contains('play')){
div1.classList.remove('play');
setTimeout(()=>div1.classList.add('play'));
return;
}
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
// or this one?
// play();
}
<!-- language: lang-css -->
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s;
transform: translateX(100px);
}
<!-- language: lang-html -->
<div class="div1"></div>
<button onclick="play()">Play</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论