Question

我正在尝试为向下滚动20像素后出现的按钮fadingInDown设置动画，但是我不知道如何实现它。

我的.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

您不需要onshow即可实现。只需将动画作为样式属性添加到您的按钮，当显示设置为阻止时，它将自动触发。

#topBtn {
  position: fixed;
  animation: fadeInDown 500ms;
}

Answer 2

.animated {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

以您的样式添加此代码，因为您尚未在样式中定义animated类

Answer 3

实际上，使用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>

让我知道这是否有效。有关示例，请参见代码段。

如何为节目中的按钮制作动画？

3 个答案: