javascript - 单击时落下的气球/图像

Question

我有六个气球图像，我希望每个图像在用户点击它们时完全停止。我做了一些测试，但它似乎不起作用。我不确定我做错了什么。当用户单击图像时，我希望 javascript 函数将动画类应用到小玩意。在我点击图片的那一刻，似乎什么也没有发生。

    var elems = document.getElementsByClassName("bauble");
function test(idtest) {
    for(var i=0;i<elems.length;i++){
         elems[i].classList.add("animation");
     }

}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animattion {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>

Answer 1

这将根据您的问题工作。

function test(idtest) {
var elems = document.getElementById(idtest);
  elems.classList.add("animation");
}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animation {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>