在滚动期间触发另一个动画旁边的动画

Question

我这里有点问题。

如您所见，当我滚动超过 section-one div 高度的 1/3 时，我的代码触发了一个动画，其中我的 box 将 100px 从左向右移动。

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

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

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

翡翠

.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

jQuery

$(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>