Question

我已经在我的html页面上为各种div元素添加了CSS动画。但所有动画同时播放＆amp;我无法在页面底部看到动画。当我向下滚动页面时，如何让它们播放？

Answer 1

您需要使用 JS 或 jQuery 来触发 CSS3 过渡/动画一旦元素在视口中**。

<强> jsFiddle demo - Using inViewport plugin

在元素进入视口时，聆听load，resize和scroll个事件以获取。
你可以使用我构建的一个小的jQuery插件：（https://stackoverflow.com/a/26831113/383904）

假设你有像“
”这样的动画框
<div class="box rotate"></div> <div class="box scale"></div> <div class="box translate"></div>

比你的CSS：

.box{ width:300px; height:300px; margin:500px 50px; background:red; transition: 1.5s; /* THE DURATION */ } .rotate.triggeredCSS3 {transform : rotate(360deg); } .scale.triggeredCSS3 {transform : scale(1.6); } .translate.triggeredCSS3 {transform : translate3d(400px,0,0); }

其中.triggeredCSS3将由插件动态分配：

$(".box").inViewport(function(px){ if(px) $(this).addClass("triggeredCSS3") ; });

Answer 2

仍然使用Javascript，但是使用此版本，您无需侦听滚动事件。速度和性能比每次检查视口中是否有物体要好得多。

检查以下内容： https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

使用 Intersection Observer ，您可以在元素可见时定义回调。

选项：
root：null <<如果要在视口（可见区域）内设置为null
threshold：0.3 <<表示可见度为30％。如果设置为0.3，则当可见度至少达到30％且可见度低于30％时，就会调用一次回调。

function callbackFunc(entries, observer)
{
  entries.forEach(entry => {
    var txt = entry.target.id + " visibility: " + entry.isIntersecting;
    
    document.getElementById('log').appendChild(document.createTextNode(txt));
    document.getElementById('log').appendChild(document.createElement("br"));
  });
}

let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.3
  };

let observer = new IntersectionObserver(callbackFunc, options);

observer.observe(document.getElementById('firstBlock'));
observer.observe(document.getElementById('secondBlock'));

#firstBlock {
  width: 50vw;
  height: 80vh;
  background: red;
}

#secondBlock {
  width: 50vw;
  height: 80vh;
  background: blue;
}

#log {
  width: 200px;
  height: 80vh;
  position: fixed;
  right: 0px;
  top: 10px;
  overflow: auto;
}

First Block:
<div id='firstBlock'> </div>
<br><br><br>
Second Block:
<div id='secondBlock'> </div>
<div id='log'>Log: </div>

Answer 3

另一种方法是使用滚动事件监听器

document.addEventListener("DOMContentLoaded", function(event) {
    document.addEventListener("scroll", function(event) {
        const animatedBoxes = document.getElementsByClassName("animated-box");
        const windowOffsetTop = window.innerHeight + window.scrollY;

        Array.prototype.forEach.call(animatedBoxes, (animatedBox) => {
            const animatedBoxOffsetTop = animatedBox.offsetTop;

            if (windowOffsetTop >= animatedBoxOffsetTop) {
                addClass(animatedBox, "fade-in");
            }
        });
    });
});

function addClass(element, className) {
    const arrayClasses = element.className.split(" ");
    if (arrayClasses.indexOf(className) === -1) {
        element.className += " " + className;
    }
}

.animated-box {
  width: 150px;
  height: 150px;
  margin-top: 100vh;
  background: blue;
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

 @-webkit-keyframes fade-in {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

<div>
  Start scrolling down...
  
  <div class="animated-box">

  </div>
        
  <div class="animated-box">
        
  </div>

  <div class="animated-box">
  
  </div>
  
  <div class="animated-box">
  
  </div>
  
  <div class="animated-box">
  
  </div>
</div>

CSS3-Animate元素，如果在视口中可见（Page Scroll）

3 个答案: