Javascript，单击按钮后一秒钟显示对象

Question

此函数的目的是使第二个按钮在单击第一个按钮一秒后出现。并在再次单击同一按钮后使其消失。 但发生的情况是，第二次单击后，第二个按钮消失并在一秒钟后返回，这在函数中不是必需的。 我彻底检查了一遍，看起来没问题。但它并没有发挥应有的作用。

function botao_home() {
  document.getElementById('mobile_index').style.display = 'block';
}
var onof1 = '0';

function showhide() {
  if (onof1 == '0') {
    setInterval(botao_home, 1000);
    onof1 = '1';
  } else {
    document.getElementById('mobile_index').style.display = 'none';
    onof1 = '0';
    /*Note that second click should only set the display property of id "mobile_index" to "none".
    But it is making the second button return, and this was not requested.*/
  }
}

#mobile_index {
  display: none
}

a {
  display: block;
  margin: 30px;
  padding: 40px;
  background: seagreen;
  color: palegreen;
  font-family: verdana, helvetica, arial, tahoma;
}

<div>
  <a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
  <a id="mobile_index">P&aacute;gina Inicial</a>
</div>

Answer 1

延迟 CSS animation + JS classList

此答案使用 CSS visibility 而不是display其中有一些布局考虑因素，可能需要 be addressed .

JavaScript toggle是类(class).show每次点击第一个<a> 按钮。如果元素上已经存在该类，则将其删除；如果不存在，则添加该类。

何时 .show添加了 CSS 动画 a 1 second delay已启动。 1 秒延迟后，播放动画(没有 duration )，设置 visibility至visible在最后。 animation-fill-mode: forwards 捕获 visibility 的状态并将其维护在元素上。

何时 .show删除后，visibility返回 CSS 的默认 hidden .

function showhide() {
    document.getElementById( 'mobile_index' ).classList.toggle( 'show' );
}

#mobile_index{
    visibility: hidden;
}
#mobile_index.show {
    animation-name: delayed_show;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
@keyframes delayed_show {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}
a {
  display: block;
  user-select: none;
  margin: 30px;
  padding: 40px;
  background: seagreen;
  color: palegreen;
  font-family: verdana, helvetica, arial, tahoma;
}

<div>
    <a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
    <a id="mobile_index">P&aacute;gina Inicial</a>
</div>