javascript - Div 只移动一次

Question

我正在尝试通过英特尔 XDK 制作一个简单的应用程序。我做了这个按钮，但它只在加载页面/应用程序后向下移动一次。如果有人给我建议，我将不胜感激。提前致谢。

代码:

function buttonClick() {
    //alert('Thanks for using our app!!!');
    document.getElementById('button').style.boxShadow = "none";
    document.getElementById('button').style.top += "10px";
    setTimeout(function(){ 
      document.getElementById('button').style.top = "-10px";
        document.getElementById('button').style.boxShadow = "0px 5px 10px #3a926d";
        }, 500);
    }
    
function onLoad() {
    intel.xdk.device.setRotateOrientation("portrait");
}
    
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);               
function onDeviceReady(){
    // set orientation
    
    intel.xdk.device.setRotateOrientation('portrait');
//    intel.xdk.device.setRotateOrientation('any');

    intel.xdk.device.hideSplashScreen();   
} 

#button {
    background-color: #29c786;
    padding: 10px;
    width: 55%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: 0;
    color: white;
    position:absolute; /*it can be fixed too*/
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;
    box-shadow: 0px 5px 10px #3a926d;
    border-radius: 5px;
}

footer {
    font-size: 8;
    position: absolute;
    bottom: 5px;
    left: 5px;
}

<div id="button" onClick="buttonClick()"><b>OPEN GALLERY</b></div>
<footer>VERSION 0.1; &copy; Tomas Hobza 2017</footer>

Answer 1

此类任务不需要 JavaScript。

这是一个 CSS 解决方案:

CSS

#button {
  background-color: #29c786;
  padding: 10px;
  width: 55%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 0;
  color: white;
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  margin:auto;
  box-shadow: 0px 5px 10px #3a926d;
  border-radius: 5px;
  transition: all 0.5s;
  font-family: Arial, Helvetica, sans-serif;
}

#button:active {
  transform: translateY(10px);
  box-shadow: none;
}

<div id="button"><b>OPEN GALLERY</b></div>

JSFiddle