Question

我正试图在bootstrap 4圆形图像周围做一个边框。我希望它像下面的codepen示例中的边框一样动画，但我想在用户向下滚动时加载它。据我所知，我需要使用Javascript来触发它，但我不确定我该怎么做。有人能帮助我吗？

<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

动画填充模式属性指定动画未播放时（在开始之前，结束之后或两者都有）的元素样式。 CSS动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响该元素。

Answer 2

您可以使用

检测滚动

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 3

您可以使用新的交叉观察者api https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 这里有一个polyfill：https://github.com/w3c/IntersectionObserver/tree/master/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以不听悬停触发器但是＆＃34;回复＆＃34;上课：修改

&:hover{

到

&.onviewport {

如果你不想使用Intersection observer api，你可以使用像https://github.com/imakewebthings/waypoints这样的插件，逻辑仍然相似。

如何在框架中加载CSS动画？

3 个答案: