jquery - 带图标的动画底部三 Angular 形

Question

我在屏幕底部有一个三 Angular 形，当一个类应用到它时，我想动画化到 View 中(从底部)。

CSS

.fade-in { bottom: -30px; }
.btn-visible.fade-in #top-btn-BG { bottom: 0; }

#top-btn a {
 position: fixed;
 z-index: 999;
 padding: 30px 30px 25px 25px;
 color: #707070;
 bottom: 0; right: 0;
}

#top-btn-BG {
  display: block;
  position: fixed;
  z-index: 950;
  border-width: 0 0 125px 125px;
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  right: 0;
  width: 0; height: 0;
  -webkit-transform:rotate(360deg);
}

html

  <div id="top-btn" class="flex fade-in">
    <a href="javascript:void(0);" onclick="scrolltop();"><i class="fa fa-long-arrow-up fa-lg"></i></a>
    <div id="top-btn-BG"></div>
  </div>

PHP

jQuery(document).ready(function($){

// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,

// bind with the button link
$animation = $('.fade-in');

// apply animation
$(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $animation.addClass('btn-visible') :
    $animation.removeClass('btn-visible');
});

...

该脚本通过在用户滚动时将 btn-visible 应用于 .fade-in 来工作。 我只是无法让它动画化。 (在哪里应用过渡 css 以确保整个 #top-btn div 向上/向下动画

Answer 1

我对 top-btn-bg 背后的目的有点困惑，因为它实际上是不可见的。我认为无论如何，您都希望将定位和类更改移动到按钮的顶级容器，然后更改顺序以便您以后的声明优先，就像这样...

#top-btn {
 position: fixed;
 z-index: 999;
 padding: 30px 30px 25px 25px;
 color: #707070;
 bottom: -30px; 
 right: 0;
}
#top-btn.fade-in{
  bottom: 0;
}