Jquery 使用图标设置底部三角形的动画

我在屏幕底部有一个三角形，当一个类应用于它时，我想在视图中设置动画（从底部）

css

html

该脚本通过在用户滚动时应用btn visible to.fade in来工作。

---

我就是不能让它动起来。（在哪里应用过渡css以确保整个顶部btn div向上/向下设置动画

我对顶部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;
}

---

这将创建背景三角形形状。（使用边框）。#顶部btn a中有一个图标，位于三角形上方。我想在应用btn visible时，将两者都设置为一个开/关屏幕动画。忽略了#FFF部分，因为它由于某种原因变灰了-上面的部分仍然可以做到这一点！

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

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

...

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