主页 / 问题 / 988241
Accepted
Lyy
Asked:2020-06-02 03:43:46 +0000 UTC2020-06-02 03:43:46 +0000 UTC

在页面滚动时开始动画

  • 772

有以下代码：

function startAnimation() {
    var box = document.querySelector('.box');
    var boxPosition = box.getBoundingClientRect().top;
    var screenPosition = window.innerHeight / 1.2;

    if(boxPosition < screenPosition) {
        box.classList.add('animation');
    }
}

window.addEventListener('scroll', startAnimation);
@keyframes rotate {
    100% {
        transform: rotate(180deg);
    }
}

.box.animation {
    animation: rotate 1s ease-in 0.1s;
    animation-fill-mode: forwards;
}

.container {
  background-color: #03A9F4;
  height: 2000px;
} 

.box-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 490px;
  border: 5px solid #FFEB3B;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #8BC34A;
  border: 5px solid #4CAF50;
}
<div class="container">
  <div class="box-wrapper">
    
  </div>
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
  <div class="box-wrapper">
    <div class="box"></div>
  </div>
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
</div>

你能告诉我如何让每个 .box 出现在屏幕上时旋转吗？我知道所有 .box 都需要放入一个数组中，但我不知道接下来要对数组做什么......

javascript

1 个回答

  1. Best Answer

    结果证明解决方案比我想象的要简单）
    querySelector只找到页面上的第一个指定元素。要查找所有内容，您需要使用querySelectorAll(). 它已经“几乎”返回了一个数组

    （演示）： 

    var test = document.querySelectorAll('.box');

console.log( test[0] );
console.log( test[1] );
console.log( test[2] );
console.log( test[3] );
console.log( test );
    <div class="box">0000</div>
<div class="box">1111</div>
<div class="box">2222</div>
<div class="box">3333</div>

    在您的情况下，盒子元素既被创建又保持在原位。因此，每次都不能在函数内部重新创建变量，而是将其从其限制中取出。

    var box = document.querySelectorAll('.box');

function startAnimation() {
  var pos = window.innerHeight / 1.2;
  var i, boxtop;
  for(i = 0; i < box.length; i++){
    boxtop = box[i].getBoundingClientRect().top;
    if(boxtop < pos ) {
        box[i].classList.add('animation');
    }
  }
}

window.addEventListener('scroll', startAnimation);
    @keyframes rotate {
    100% {
        transform: rotate(180deg);
    }
}

.box.animation {
    animation: rotate 1s ease-in 0.1s;
    animation-fill-mode: forwards;
}

.container {
  background-color: #03A9F4;
  height: 2000px;
} 

.box-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 490px;
  border: 5px solid #FFEB3B;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #8BC34A;
  border: 5px solid #4CAF50;
}
    <div class="container">
  <div class="box-wrapper"></div>
  
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
  <div class="box-wrapper">
    <div class="box"></div>
  </div>
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
</div>

    演示工作for()

    var i;

for( i = 5; i < 10; i++ ){
  console.log( 'На этом круге [i] равен - ' + i );
}

/*Это то же самое, что и

console.log( 5 );
console.log( 6 );
console.log( 7 );
console.log( 8 );
console.log( 9 );

for просто сильно сокращает код. Вместо i < 10 в вашем случае используется
количество элементов box. А i++ просто частный случай. То же, что и i = i + 1. 
Там может быть вообще всё что угодно.
*/

    Ps 在所有动画完成后禁用该功能会很好......所以它不会在每次滚动时都检查这么多东西。但我不知道如何。）

    • 3

相关问题