如何根據視口提供過渡效果？

Question

我想添加animation和transition當頁面滾動並且視口在屏幕上可見時的效果。 我想下面的一個檢查特定塊是否已經進入視，但它沒有工作：

js

(function($) { 

    $.fn.visible = function(partial) { 

     var $t   = $(this), 
      $w   = $(window), 
      viewTop  = $w.scrollTop(), 
      viewBottom = viewTop + $w.height(), 
      _top   = $t.offset().top, 
      _bottom  = _top + $t.height(), 
      compareTop = partial === true ? _bottom : _top, 
      compareBottom = partial === true ? _top : _bottom; 

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 

    }; 

})(jQuery); 

var win = $(window); 

var allMods = $(".module"); 

allMods.each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
    el.addClass("already-visible"); 
    } 
}); 

win.scroll(function(event) { 

    allMods.each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-in"); 
    } 
    }); 

}); 

Html

<section> 

    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 
    <div class="module"></div> 


</section> 

css

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

section { 
    background: #eee; 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 20px; 
    overflow: hidden; 
} 

.module { 
    width: 48%; 
    min-height: 200px; 
    background: white; 
    position: relative; 
    float: left; 
    padding: 20px; 
    margin-right: 4%; 
    margin-bottom: 4%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
} 
.module:nth-child(even) { 
    margin-right: 0; 
} 



.come-in { 
    transform: translateY(150px); 
    animation: come-in 0.8s ease forwards; 
} 

.come-in:nth-child(odd) { 
    animation-duration: 0.6s; 
} 

.already-visible { 
    transform: translateY(0); 
    animation: none; 
} 

@keyframes come-in { 
    to { 
    transform: translateY(0); 
    } 
} 

請h讓我用jQuery來做到這一點。

Answer 1

其工作。我剛剛增加了動畫的持續時間及其可見：

(function($) { 
 

 
    $.fn.visible = function(partial) { 
 

 
    var $t = $(this), 
 
     $w = $(window), 
 
     viewTop = $w.scrollTop(), 
 
     viewBottom = viewTop + $w.height(), 
 
     _top = $t.offset().top, 
 
     _bottom = _top + $t.height(), 
 
     compareTop = partial === true ? _bottom : _top, 
 
     compareBottom = partial === true ? _top : _bottom; 
 

 
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 
 

 
    }; 
 

 
})(jQuery); 
 

 
var win = $(window); 
 

 
var allMods = $(".module"); 
 

 
allMods.each(function(i, el) { 
 
    var el = $(el); 
 
    if (el.visible(true)) { 
 
    el.addClass("already-visible"); 
 
    } 
 
}); 
 

 
win.scroll(function(event) { 
 

 
    allMods.each(function(i, el) { 
 
    var el = $(el); 
 
    if (el.visible(true)) { 
 
     el.addClass("come-in"); 
 
    } 
 
    }); 
 

 
});

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
section { 
 
    background: #eee; 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
} 
 
.module { 
 
    width: 48%; 
 
    min-height: 200px; 
 
    background: white; 
 
    position: relative; 
 
    float: left; 
 
    padding: 20px; 
 
    margin-right: 4%; 
 
    margin-bottom: 4%; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
 
} 
 
.module:nth-child(even) { 
 
    margin-right: 0; 
 
} 
 
.come-in { 
 
    transform: translateY(150px); 
 
    animation: come-in 1.8s ease forwards; 
 
} 
 
.come-in:nth-child(odd) { 
 
    animation-duration: 1.6s; 
 
} 
 
.already-visible { 
 
    transform: translateY(0); 
 
    animation: none; 
 
} 
 
@keyframes come-in { 
 
    to { 
 
    transform: translateY(0); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<section> 
 

 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 
    <div class="module"></div> 
 

 

 
</section>