Question

我在屏幕底部有一个三角形，我希望在将一个类应用到它时将其设置为视图（从底部开始）。

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;
}

用图标动画底部三角形

1 个答案: