是否有任何方法可以淡入我的按钮？[等候接听]

Question

我正在开发一个网站，我想添加到我的脚本代码淡入淡出，但我不知道如何。

这是我的代码：

<script>

  function showdiv() {

    document.getElementById("show").style.visibility = "visible";

  }

  setTimeout("showdiv()", 2000);

</script>

<div class="botao" id="show" style="visibility:hidden">

  <a href="logreg/login.php" class="btn">

    <span></span>

    <span></span>

    <span></span>

    <span></span> Começar

  </a>

</div>

Answer 1

你不能动画，visibility因为它不是一个连续的属性 - 元素是visible或者hidden。相反，您可以设置动画opacity，它可以控制元素的透明度。你想要的是从opacity: 0（完全透明）到opacity: 1（完全不透明/可见）的平滑过渡。你可以用CSS完全做到这一点 - 根本不需要JavaScript。这种方法的优点是CSS比JavaScript更快，通常更容易理解和维护。首先在CSS中定义动画关键帧：@keyframes&nbsp;fadeIn&nbsp;{ &nbsp;&nbsp;0%&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;} &nbsp;&nbsp;100%&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;1; &nbsp;&nbsp;}}然后你只需将动画附加到你的元素（也在CSS中）：#show&nbsp;{ &nbsp;&nbsp;animation-name:&nbsp;fadeIn; &nbsp;&nbsp;animation-duration:&nbsp;1s; &nbsp;&nbsp;animation-iteration-count:&nbsp;1;}