进入视口时触发 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 ，逻辑仍然是相似的。