javascript - 如何错开向滚动的 div 添加/删除多个类？

Question

我正在尝试让 Logo 淡出，而较小的版本在滚动时淡入。它目前在滚动缩放方面工作得很好(see JS Fiddle here)，但现在我需要它在上面淡出，我不知道我哪里出错了(see JSFiddle here)，它目前不流畅。谁能指出我正确的方向？

JS:

function scrollAnimation() {
  if ($(window).width() > 640){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > 50) {
      $(".inner").addClass('scrolling');
      setTimeout(function() {
        $(".inner").removeClass('hide-logo').addClass('show-logo');
      }, 500);
    }
    else {
      $(".inner").addClass('hide-logo').removeClass('show-logo scrolling');
    };
  } else {
    $(".inner").removeClass('show-logo scrolling');
    $(".inner").addClass('hide-logo');
  }
}

$(window).on('scroll resize', function () {
  scrollAnimation();
});

Answer 1

CSS 参数 transition-delay 提供了一种在过渡开始时错开的方法。这意味着您可以在第一次向下滚动时触发过渡，然后在一段时间后让辅助操作发生。

在某些情况下，您不能简单地延迟开始，而是需要在执行某项操作之前监听转换结束，然后有一个 transitionend 事件，您可以将处理程序绑定(bind)到该事件。

// store the logo state
var logoFullSize = true;

// add listener to trigger fade-in once fade-out has finished
$(".site-header").bind('transitionend', function() {
  $(this).removeClass('fade-out')
});


function scrollAnimation() {
  // removed this logic so demo works in stackoverflow
  // if ($(window).width() > 640) {

    var scrollTop = $(window).scrollTop();

    if (scrollTop > 50 && logoFullSize) { // change to small logo
      $(".logo").addClass('scrolling');
      $(".site-header").addClass('fade-out');
      logoFullSize = false;
    }

    if (scrollTop < 50 && !logoFullSize) { // change to full-size logo
      $(".logo").removeClass('scrolling');
      $(".site-header").addClass('fade-out');
      logoFullSize = true;
    }
  //}
}

$(window).on('scroll resize', scrollAnimation);

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #000;
  opacity: 1;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: easeInExpo;
}

img.logo {
  display: block;
  margin: 0 auto;
  height: 120px;
  padding: 5%;
  transition-property: height;
  transition-duration: .2s;
  transition-delay: .2s;
}

img.scrolling {
  height: 50px;
}

.site-header.fade-out {
  opacity: 0.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-header">
  <span class="inner">
  <img class="logo" src="http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg" />
  </span>
</div>

<div class="text">
  <p>
    Lorem ipsum dolor sit amet, id pro case commodo docendi, denique periculis vix ad. Eam eu laboramus conceptam reprimique, quis tacimates pericula in eam, cum ei amet commune. Pri porro atomorum ut, at augue graece torquatos vim. Dolore gubergren mea ut,
    ex sit munere ancillae delicata.
  </p>
  <p>
    Antiopam oportere ea duo. Ut per vidit accusata neglegentur. Te quem utamur eam. Mea vidit illum tacimates ne.
  </p>
  <p>
    Cu summo viderer quaeque per. Utinam electram sed et. Ius no accusamus vulputate, vis dicant delectus deserunt ne. Appareat ponderum delicatissimi vis ut, ut alia mucius sea. Perpetua consulatu temporibus vix ad, error accommodare in sea.
  </p>
  <p>
    Ex est mollis dolores inciderint, eu vix quas assum blandit, vis ad enim nihil nusquam. Cu iusto veniam suavitate duo. Mundi oratio perpetua id ius, cu usu facilisis dissentiet. Saepe debitis detraxit id per, te debitis instructior pro. Id ignota epicuri
    rationibus vis, dicam noster ex ius, ad cum dico mazim persequeris.
  </p>
  <p>
    Duo minim audiam regione at, an qui qualisque prodesset. Ex doming habemus delicatissimi sit, cum ad pertinax molestiae, ea nam agam fabellas. Quaeque aliquid ceteros id vix, vis omnium suavitate explicari ex. Cum an quas meliore.
  </p>
  <p>
    Lorem ipsum dolor sit amet, id pro case commodo docendi, denique periculis vix ad. Eam eu laboramus conceptam reprimique, quis tacimates pericula in eam, cum ei amet commune. Pri porro atomorum ut, at augue graece torquatos vim. Dolore gubergren mea ut,
    ex sit munere ancillae delicata.
  </p>
  <p>
    Antiopam oportere ea duo. Ut per vidit accusata neglegentur. Te quem utamur eam. Mea vidit illum tacimates ne.
  </p>
  <p>
    Cu summo viderer quaeque per. Utinam electram sed et. Ius no accusamus vulputate, vis dicant delectus deserunt ne. Appareat ponderum delicatissimi vis ut, ut alia mucius sea. Perpetua consulatu temporibus vix ad, error accommodare in sea.
  </p>
  <p>
    Ex est mollis dolores inciderint, eu vix quas assum blandit, vis ad enim nihil nusquam. Cu iusto veniam suavitate duo. Mundi oratio perpetua id ius, cu usu facilisis dissentiet. Saepe debitis detraxit id per, te debitis instructior pro. Id ignota epicuri
    rationibus vis, dicam noster ex ius, ad cum dico mazim persequeris.
  </p>
  <p>
    Duo minim audiam regione at, an qui qualisque prodesset. Ex doming habemus delicatissimi sit, cum ad pertinax molestiae, ea nam agam fabellas. Quaeque aliquid ceteros id vix, vis omnium suavitate explicari ex. Cum an quas meliore.
  </p>
</div>