jquery - 在滚动期间同时触发一个动画

Question

我这里有点问题。

如您所见，我的代码触发了一个动画，当我滚动超过 1/3 高度时，我的 box 从左边向右边移动 100px 第一节 div.

如您所见，在 box 中有一个 line div，它从 0px 增长到 100px .

问题来了:我希望 line 转换与我的 box 元素一起触发。目前这不会发生。如果我等待超过 2s，即 line 的 animation-duration，则动画在 box< 时完成 div 在屏幕上弹出。

下面我附上了我的代码，这是一个 link到我的代码笔。

Jade

.landing-page
.section-one
  .box.hidden
    .line

SASS

@mixin box()
  position: absolute
  width: 50%
  height: 50%
  background: red
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section-one
  position: relative
  height: 100vh
  width: 50vw
  background: lightblue
  display: flex
  justify-content: end
  align-items: center
  .box
    @include box()
    transition: 2000ms
    .line
      background: white
      height: 20px
      transition: 2000ms
      animation-name: test
      animation-duration: 2s
      animation-fill-mode: forwards
  .box.hidden
    opacity: 0
    transform: translateX(-100px)

@keyframes test
  0%
    width: 0px
  100%
    width: 100px

查询

$(document).ready(function () {
    var aboutEl = $('.box'),
        aboutElOffset = aboutEl.offset().top/3,
        documentEl = $(document);

    documentEl.on('scroll', function () {
        if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
    });
});

Answer 1

删除类时简单地应用动画(检查代码中的注释):

$(document).ready(function() {
  var aboutEl = $('.box'),
    aboutElOffset = aboutEl.offset().top / 3,
    documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
  });
});

.landing-page {
  height: 100vh;
  width: 100vw;
  background: gray;
}

.section-one {
  position: relative;
  height: 100vh;
  width: 50vw;
  background: lightblue;
  display: flex;
  justify-content: end;
  align-items: center;
}

.section-one .box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  transition: 2000ms;
}

.section-one .box .line {
  background: white;
  height: 20px;
  transition: 2000ms;
  /*remove it from here 
  animation-name: test;*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
/*Apply animation when there is no hidden*/
.section-one .box:not(.hidden) .line {  
  animation-name: test;
}

.section-one .box.hidden {
  opacity: 0;
  transform: translateX(-100px);
}

@keyframes test {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="landing-page"></div>
<div class="section-one">
  <div class="box hidden">
    <div class="line"></div>
  </div>
</div>

您也可以对白色元素使用过渡:

$(document).ready(function() {
  var aboutEl = $('.box'),
    aboutElOffset = aboutEl.offset().top / 3,
    documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
  });
});

.landing-page {
  height: 100vh;
  width: 100vw;
  background: gray;
}

.section-one {
  position: relative;
  height: 100vh;
  width: 50vw;
  background: lightblue;
  display: flex;
  justify-content: end;
  align-items: center;
}

.section-one .box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  transition: 2000ms;
}

.section-one .box .line {
  background: white;
  height: 20px;
  transition: 2s;
  width:0px;
}
.section-one .box:not(.hidden) .line {  
  width:100px;
}

.section-one .box.hidden {
  opacity: 0;
  transform: translateX(-100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="landing-page"></div>
<div class="section-one">
  <div class="box hidden">
    <div class="line"></div>
  </div>
</div>