在視口中開始動畫

Question

我正在嘗試制作一個在屏幕視口中開始的動畫。

 // Returns true if the specified element has been scrolled into the viewport. function isElementInViewport(elem) { var $elem = $(elem); // Get the scroll position of the page. var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); var viewportTop = $(scrollElem).scrollTop(); var viewportBottom = viewportTop + $(window).height(); // Get the position of the element on the page. var elemTop = Math.round($elem.offset().top); var elemBottom = elemTop + $elem.height(); return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); } // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.image-container') if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } else { $elem.removeClass('start'); } } // Capture scroll events $(window).scroll(function() { checkAnimation(); });

 /* slide reveal aniamtion */ @keyframes left { 0% { transform: translatex(-100%); } 100% { transform: translatex(0%); } } /* animation */ .animated-container { width: 600px; height: 600px; background: #f5f5f5; overflow: hidden; } .image-container { width: 100%; height: 100%; background: pink; transform: translatex(-100%); } .start { animation: left 2s ease-out forwards; } .float-right { float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="animated-container"> <div class="image-container"> </div> </div>

出於某種原因，該類在視圖中似乎沒有應用於容器框並返回錯誤。 任何人都可以幫助我解決這個問題以及為什么會阻止 javascript 添加類的原因。

Answer 1

第 68 行（ checkAnimation函數中的第一行）讀取$(".image-container'); 。注意您如何使用雙引號開始字符串，但使用單引號結束它。

只需將其更改為$('.image-container')可以了:)

---

編輯。 所以，現在你已經解決了上面的問題，但是沒有定義$ 。 您正在使用$(element)但您還沒有定義$作用或含義。 將 jQuery 鏈接到您的項目怎么樣？ 或者至少將$定義為 querySelector 函數的簡寫？

---

編輯 2 。 好的，現在它沒有拋出任何錯誤，但它不起作用。 好吧，它實際上確實添加了.start類 - 雖然單獨的 start 類不足以啟動動畫。 你的CSS文件添加與元素的動畫.left.start ，所以要么改變，要只觸發.start類或添加.left類，就像你添加.start類。