强制css重新渲染答案

【问题标题】：Force the css to re-render强制css重新渲染
【发布时间】：2014-07-27 21:56:28
【问题描述】：

我有一些文章的样式是这样的 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 并在此脚本运行后查看这些更改？

【问题讨论】：

淡入淡出，也就是不透明度的过渡，不显示/块。 DOM 没有改变 afaik。
你说得对，我没有这样想，所以我可能需要一个不同的解决方案

标签： javascript jquery css dom rerender

【解决方案1】：

你可以选择所有可见的元素，所以在你完成fadeIn 和fadeOut 之后，你可以选择所有.articles，它们是：可见的。

文档：

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

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

（例如，这些类应该有您的顶部和底部填充）

【讨论】：