转换操作后显示弹出窗口

Question

我有一个转换和一个签入 javascript。目前，警报显示在实际转换之前。有没有办法只在转换完成后显示警报？

目标是进行转换，然后进行检查，这样我就可以发生某种事件，在屏幕中间显示获胜者横幅。现在唯一的 objective 是在转换后进行检查。

这是我现在拥有的：

<html>
<head>
<script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'style.css';
    document.getElementsByTagName('HEAD')[0].appendChild(link);
</script>
</head>

<html lang="en">

<body>
<div id="field" class="soccer-field">
    <div id="b" class="btnBlue"></div>
    <div id="ball" class="btnSoccerBall"></div>
    <div id="r" class="btnRed"></div>
</div>
</body>

</html>

<script>
//Add onclick
document.getElementById("b").addEventListener("click", myMoveLeft);
document.getElementById("r").addEventListener("click", myMoveRight);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0, y = 0;
function myMoveLeft() {
    anim = item.animate([
        // keyframes
        { transform: `translate(${x}px, ${y}px)` },
        { transform: `translate(${x + 100}px, ${y}px)` }
    ], {
        duration: 500,
        iterations: 1,
        fill: 'forwards'
    });
    x += 100;
    
    if (x == 700) {
        alert("ok")
    }
}
function myMoveRight() {
    anim = item.animate([
        // keyframes
        { transform: `translate(${x}px, ${y}px)` },
        { transform: `translate(${x - 100}px, ${y}px)` }
    ], {
        duration: 500,
        iterations: 1,
        fill: 'forwards'
    });
    x -= 100;
    if (x == -700) {
        alert("ok")
    }
}
item.addEventListener('animationend', () => {
    console.log('Animation ended');
});
</script>

Css

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20rem;
overflow: hidden;
}

.btnBlue {    
background-image:url(b.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-left: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}

.btnRed {    
background-image:url(r.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-right: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}

.btnSoccerBall {
background-image:url(s.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%; 
position: relative;
margin: auto;
height: 100px;
width: 100px;
}

.soccer-field {
background-image:url(back.jpg);    
background-repeat: no-repeat;
background-position: center;
background-size: 100%;

height: 100vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
/* padding: 0 20px; optional */
}

Answer 1

您可以使用 Animation.onfinish 函数并将您的警报代码移入其中。像下面这样尝试。

document.getElementById("b").addEventListener("click", myMoveLeft);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0,
  y = 0;

function myMoveLeft() {
  anim = item.animate([
    // keyframes
    {
      transform: `translate(${x}px, ${y}px)`
    },
    {
      transform: `translate(${x + 100}px, ${y}px)`
    }
  ], {
    duration: 500,
    iterations: 1,
    fill: 'forwards'
  }).onfinish = function() {
    x += 100;

    if (x == 700) {
      alert("ok")
    }
  };
}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});

<div>

  <input type='button' id='ball' value='ball' />

</div>
<input type='button' id='b' value='l' />

转换操作后显示弹出窗口

Display popup after transform action

javascript

transform

alert