javascript - 强制CSS重新渲染

Question

我有一些文章的样式是这样的 sass

padding-bottom: 125px
padding-top: 125px
border-bottom: 1px solid rgba(0,0,0,0.1)
&:first-of-type
    padding-top: 0
    &:last-of-type
        padding-bottom: 0
            border-bottom: none

我有一个脚本，当像这样单击一个类别时，它会导致所有没有相似类的文章淡出

// Category Switching
$('.cats span').click(function(){
    console.log('click');
    var cat = $(this).attr('class');
    if(cat == 'all'){
        $('.articles').find('article').fadeIn();
    } else {
        $('.articles').find('article:not(.'+cat+')').fadeOut();
    }
});

很明显，第一篇文章可能不再是第一篇文章，因此帖子顶部的填充，即使是最后一篇底部填充的帖子，也需要是起飞，但由于 CSS 已经呈现，它不知道 DOM 中发生了变化。

如何让 CSS 重新评估 DOM 并在此脚本运行后查看这些更改？

Answer 1

您可以选择所有可见元素，因此在您执行完fadeIn 和fadeOut 之后，您可以选择所有.articles :visible .

文档:

http://api.jquery.com/visible-selector/

然后您可以选择第一个和最后一个 dom 元素并给它们一个 .last_article 和.first_article` css 类。

(例如那些类应该有你的顶部和底部填充)