Question

我使用animate.css，并希望在内容滚动到视图中时激活动画。我该如何实施呢？这是一个示例：

<div class="services__content">
            <div class="services__img animated fadeInLeft">
                <div class="relative">
                    <img src="images/png/services-laptop.png" alt="" class="services__img-relative">
                </div>
            </div>
            <div class="services__content-text aminated fadeInRight">
                <h3>Web Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
                <a href="#" class="btn btn--orange hov-up">View more</a>
            </div>
        </div>

我附加了类animated fadeInRight，但是当我释放页面时它们自动运行。例如，它不能像在一个元素在视口中可见时那样以编程方式启动动画，为此您具有Javascript。但是我该如何实现呢？

Answer 1

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

function toggleAnimationProCon(element){
let elementtoAnimate= document.getElementsByClassName(element)[0];

if(isScrolledIntoView(elementtoAnimate)){
	prosdiv.classList.add("class");
	consdiv.classList.add("class");
}else{
	prosdiv.classList.remove("class");
	consdiv.classList.remove("class");
}
}

将此方法附加到“ scroll”事件，将有助于查找天气元素在视图中是否可见。如果可见，请执行您的操作。我建议也看看_.throttle方法来附加一个滚动事件，这将很有帮助

当内容滚动到视图中时如何激活动画

1 个答案: