javascript - 如何为节目中的按钮设置动画？

Question

当向下滚动 20 像素后出现按钮时，我正在尝试为它设置动画以淡入淡出，但我不知道如何实现它。

我的 .css 文件中有 fadeInDown，但我找不到在哪里调用它(在 javascript 或 .html 中)

  window.onscroll = function() {
    scrollFunction()
  };

  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.getElementById("topBtn").style.display = "block";
      $('#topBtn').fadeInDown('slow');
    } else {
      document.getElementById("topBtn").style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

@-moz-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onShow="animation: fadeInDown" class="animated fadeInDown" onclick="topFunction()" id="topBtn" title="Go to top">Top</button>

期望按钮在显示时具有动画效果，但它突然出现。

Answer 1

这实际上可以像这样使用 jQuery UI 非常容易地完成:

$(window).on('scroll', function(){
  var scrollPosition = $(window).scrollTop();
  if(scrollPosition > 20) {
    $('#scroll-to-top').show("drop",{direction: "up"},300);
  } else {
    $('#scroll-to-top').hide("drop",{direction: "up"},300);
  }
});

.scroll-to-top {
  display:none;
  position:fixed;
  top:24px;
  right:24px;
}
.content {
  height:2000px;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="scroll-to-top" class="scroll-to-top">
  Scroll To Top
</button>

<div class="content"></div>

让我知道这是否有效。请参阅示例的代码片段。