進入視口時觸發 CSS 動畫

Question

我正在嘗試在 bootstrap 4 圓形圖像周圍制作邊框。 我希望它像下面 codepen 示例中的邊框一樣動畫，但我希望它在用戶向下滾動時加載。 據我了解，我需要使用 Javascript 來觸發它，但我不確定如何做到這一點。 有人能幫我嗎？

https://codepen.io/katmai7/pen/jCAhv

<div class="wrap">
<div class="circle">
   <i class="icon i1 icon-terminal"></i>
   <i class="icon i2 icon-code-fork"></i>
   <i class="icon i3 icon-keyboard"></i>
   <i class="icon i4 icon-code"></i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">hover on me</span>
 </div>
</div>

Answer 1

您可以使用檢測滾動

window.onscroll = function(e) {
    // Scroll up or down
}

動畫出現時

&:hover{
    animation: border .4s ease 1 forwards;
    cursor: none;
    [...]

因此，您需要將所有 CSS 添加到新 id 中，並在檢測到滾動時使用 JavaScript 將其添加到您的元素中：

.newClass{
    animation: border .4s ease 1 forwards;
    cursor: none;
    [...]

添加它：

var element = document.getElementById("element-id");
element.className += " newClass";

Answer 2

animation-fill-mode 屬性指定動畫未播放時元素的樣式（開始前、結束后或兩者）。 CSS 動畫不會在播放第一個關鍵幀之前或播放最后一個關鍵幀之后影響元素。

Answer 3

您可以使用新的 Intersection 觀察者 api https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ，這里有一個 polyfill： https : //github.com/w3c/IntersectionObserver/tree/主/polyfill

代碼將是這樣的：

let options = {
root: document.querySelector('.wrap'),
rootMargin: '0px',
threshold: 1.0
}
let element = document.querySelector('.circle')
let observer = new IntersectionObserver(() => element.classList.add('onviewport') , options);

你也應該修改你的 css 來不監聽懸停觸發器而是“響應”一個類：修改

&:hover{

到

&.onviewport {

如果您不想使用 Intersection 觀察者 api，您可以使用這樣的插件https://github.com/imakewebthings/waypoints ，邏輯仍然是相似的。