Question

我和我的伴侣正在尝试为我们的婚礼开发一个网站，我们已经准备好了HTML / CSS，但是我们在网上找到了一个JS教程，并希望在页面滚动时为每个Div设置动画。不幸的是，我们陷入困境，不确定该怎么办-如果最好是完全离开或重新开始。

我们很幸运地遵循了本教程。 https://www.youtube.com/watch?v=C_JKlr4WKKs

<!-- Introduction -->

<div class="container-fluid">
  <div class="container transition transition-appear">

        <h1>Emily & Liam</h1>
        <p>Request your company at the ceremony and celebration of their marriage on Sunday 21st July 2019</p>
        <div class="spacer-sml">
        </div>

      <img class="img-responsive centre" src="images/em_liam_walking_small.png" alt="Devonshire Terrace" title="Devonshire Terrace illustration by Stanley Atkins" height="602.93px" width="650px">
      <h2>Devonshire Terrace</h2>
      <p>London, EC2M 4WY</p>
      <div class="spacer-vsml">
      </div>
      <a class="typeform-share btn btn-outline-dark centre" href="https://liamatkins.typeform.com/to/plvmSP" data-mode="drawer_right" data-hide-headers=true data-hide-footer=true data-submit-close-delay="5" target="_blank">RSVP </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
    </div>
    <p>Kindly respond by 1st April 2019</p>
    <div class="spacer-lrg">
    </div>
  </div>
</div>

/*
* — Transitons —
*/

.transition {
  opacity: 0;
  transform: translateY(20px);
  transition: 2s all ease-in-out;
}

.transition-appear {
  opacity: 1;
  transform: translateY(0px);
}

function scrollAppear(){
  var transition = document.querySelector('.transition');
  var transitionPosition = transition.getBoundingClientRect().top;
  var screenPosition = window.innerHeight;

  if(transitionPosition < screenPosition){
    transition.classList.add('.transition-appear');
}

window.addEventListener('scroll',scrollAppear);

功能不起作用。

Answer 1

问题可能是您需要wait until the page is fully loaded：

document.onload = function() {
  // Literally all of the javascript you wrote goes INSIDE this anonymous function
}

此外，将来，它可能有助于详细说明“功能不起作用”的含义。

编辑：看起来，您在函数定义上也缺少结尾{。

Vanilla JavaScript教程中的视觉效果问题-初学者

1 个答案: