我有一個用CSS3制作動畫的條形圖，當前在頁面加載時激活動畫。我的問題是，由于之前有很多內(nèi)容，因此給定的條形圖不在屏幕上，因此當用戶向下滾動到該條形圖時，動畫已經(jīng)完成。我一直在尋找通過CSS3或jQuery僅在查看者看到圖表時激活條形圖上的CSS3動畫的方法。<div>lots of content here, it fills the height of the screen and then some</div><div>animating bar chat here</div>如果在頁面加載后立即快速向下滾動，則可以看到該動畫。這是我的代碼的jsfiddle。另外，我不知道這是否重要，但是我在頁面上有此條形圖的多個實例。我遇到了一個名為Waypoint的jQuery插件，但是我絕對沒有運氣。如果有人可以指出正確的方向，那將非常有幫助。謝謝！
3 回答
慕妹3242003
TA貢獻1824條經(jīng)驗 獲得超6個贊
為了激活CSS動畫，需要在元素可見時將一個類添加到該元素。正如其他答案所表明的那樣，為此需要JS，而Waypoints是可以使用的JS腳本。
航點是滾動到某個元素時觸發(fā)功能的最簡單方法。
在Waypoints版本2之前，這曾經(jīng)是一個相對簡單的jquery插件。在版本3及更高版本（本指南版本3.1.1）中，引入了一些功能。為了達到上述目的，可以使用腳本的“ inview快捷方式”：
從此鏈接或從Github下載并添加腳本文件（版本3 尚未通過CDNJS提供，盡管RawGit始終是一個選項）。
照常將腳本添加到HTML中。
<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>
添加以下JS代碼，#myelement并用適當?shù)腍TML元素jQuery選擇器替換：
$(window).load(function () {
var in_view = new Waypoint.Inview({
element: $('#myelement')[0],
enter: function() {
$('#myelement').addClass('start');
},
exit: function() { // optionally
$('#myelement').removeClass('start');
}
});
});
我們使用此處$(window).load()說明的原因。
- 3 回答
- 0 關(guān)注
- 929 瀏覽
添加回答
舉報
0/150
提交
取消