滚动时如何调整 Animate.css 的速度答案

【问题标题】：How to adjust the speed Animate.css when scrolling滚动时如何调整 Animate.css 的速度
【发布时间】：2017-11-03 15:13:29
【问题描述】：

我在我的网站上使用 Animate.css，但它显示内容太晚了。

我想知道如何调整滚动时动画出现的速度。

我找到了一些关于滚动功能的 javascript 代码。

(function($){
$.fn.edsViewportChecker = function(useroptions){

    var options = {
        classToRemove: 'eds-scroll-hidden',
        classToAdd: 'eds-scroll-visible',
        offset: 75,
        callbackFunction: function(elem){}
    };
    $.extend(options, useroptions);

    var $elem = this;            

    this.checkElements = function(){

        var windowHeight = $(window).height(),
        viewportTop = $(document).scrollTop(),
        viewportBottom = (viewportTop + windowHeight);

        $elem.each(function(){
            var $obj = $(this);
            var scroll_offset = $obj.attr('eds_scroll_offset');

            if ($obj.hasClass(options.classToAdd)){
                return;
            }

            var elemTop = '';
            if(scroll_offset != null && scroll_offset != ''){
                elemTop = Math.round( $obj.offset().top ) + Math.round(Number(scroll_offset) * $obj.height() * 0.01),
                    elemBottom = elemTop + ($obj.height());
            }else{
                elemTop = Math.round( $obj.offset().top ) + Math.round(options.offset * $obj.height() * 0.01),
                elemBottom = elemTop + ($obj.height());
            }

            // Add class if in viewport
            if ((elemTop < viewportBottom) && (elemBottom > viewportTop)){
                $obj.addClass(options.classToAdd);
                $obj.removeClass(options.classToRemove);
                setTimeout(function(){
                    $obj.css('overflow', 'hidden');
                }, 250);
                options.callbackFunction($obj);
            }
        });
    };

    $( window ).on( "scroll", $.throttle( 250, this.checkElements ) );
    //For applying the onscroll part only after the user scroll atleast ones event after the item is in view port, just comment this out        
    this.checkElements();

}; })(jQuery);

我该修复哪个部分？

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

  -vendor-animation-duration: 3s;

如 github 页面中所见https://github.com/daneden/animate.css

改变持续时间，持续时间越长越慢。

为-vendor-animation-duration: 3s; 我的意思是改变3s，如果你想让它更慢设置它大于3，另一方面如果你想要它更快设置它小于3。

【讨论】：

【解决方案2】：

setTimeout 函数中的 250 应该指定延迟毫秒数，直到 DOM 元素的 overflow 属性设置为 hidden（我相信这会触发动画）。

此外，您可以将offset: 75 更改为更小的值，以便在滚动时更快地启动动画。

编辑： 使用 Jonathan Tan 的答案比编辑 JS 文件更安全（查看 github 后，我什至不知道你在哪里找到的）。请记住更改-vendor-animation-duration: 3s; 中的-vendor- 以进行覆盖。例如：

-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;

【讨论】：