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

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");
}
}

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