在Framework7上制作隐藏和显示动画

Question

我正在尝试动态插入的"滚动到顶"按钮的隐藏和显示动画

$('.content').append('<button id="scroll_to_top_btn" title="Go to top"><i class="fas fa-arrow-up"></i></button>');

//Show Scroll to top button when scroll and hide when on top
$('.page-content-news').on('scroll', function () {
var scrollTop = this.scrollTop;
if(scrollTop > 0){
$('#scroll_to_top_btn').animate({'display': 'block'});
}
else{
$('#scroll_to_top_btn').animate({'display': 'none'});
}
})

但是当我滚动页面时不要设置动画(使用hide((和show((效果很好(

我做错什么了吗？

Answer 1

您可以使用一些样式来实现这一点。

#scroll_to_top_btn {
transition-duration: 0.3s;
opacity: 1;
}
#scroll_to_top_btn.hide {
opacity: 0;
}

并添加/删除隐藏类，而不是设置动画。

$('.content').append('<button id="scroll_to_top_btn" title="Go to top"><i class="fas fa-arrow-up"></i></button>');

//Show Scroll to top button when scroll and hide when on top
$('.page-content-news').on('scroll', function () {
var scrollTop = this.scrollTop;
if(scrollTop > 0){
$('#scroll_to_top_btn').removeClass('hide');
} else {
$('#scroll_to_top_btn').addClass('hide');
}
})