Question

我正在创建一个WordPress博客，我试图在帖子进入视口时为帖子创建动画效果，但我试图在不使用任何javascripts插件的情况下尝试这样做。在我的头版上，第一个帖子占据了容器的100％宽度，而每个后续帖子占用了50％，因此2个帖子可以在容器内彼此相邻。

默认情况下，第一篇文章有3个相关的类：＆＃39; post＆＃39;，＆＃39; features＆＃39;并且＆＃39;动画＆＃39;，而每个后续帖子都有默认课程＆＃39; post＆＃39;。我添加了动画＆＃39;默认为第一个帖子的类，以便在页面加载后立即触发动画，而对于每个后续帖子，该类都会动画＆＃39;在帖子进入视口后，通过jquery添加。

这样做我使用这段jquery代码：

jQuery(document).ready(function($) {
    var winHeight = $(window).height();
    var offset = 50;

    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function() {
        winHeight = $(window).height();
    });

    // When we scroll we do some checks...
    $(window).on('scroll', function() {

        // get current scrollPos
        var trigger = $(window).scrollTop() + winHeight;

        // Rip through elements we're affecting
        $('article.post:not(.animated)').each(function() {
            var elementOffset = $(this).offset().top;

            if( elementOffset < trigger ) {
                $(this).addClass('animated');
            }
        });

    });
});

为了创建CSS动画，我制作了这段CSS代码：

article.post {
    visibility: visible;
    opacity: 0;
    transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transition: opacity 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, transform 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
}
article.post.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transition: opacity 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, transform 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    }

    to {
        opacity: 1;
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

我遇到的问题是当我进入档案页面时，默认情况下所有帖子都是50％宽度，其中4个在视口内立即可见，但由于我没有动画添加到它们通过php，只有在我向下滚动后才会将动画类添加到它们中，所以当页面加载时，在滚动之前它们不可见也不动画，因为类article.post的不透明度设置为0。如何编辑上面的jquery代码，以便考虑页面加载时视口内可见的帖子，并在页面滚动时立即将动画添加到它们中？

Answer 1

将滚动事件附加到窗口后，您可以运行它：

$(window).trigger('scroll');

如何通过jquery将一个类添加到页面加载时视口内可见的帖子以及滚动时进入视口的帖子？

1 个答案: