在滚动期间触发另一个动画

Question

我在这里遇到了一些问题。

正如您所看到的，当我滚动box div的高度的1/3时，我的代码会触发一个动画，其中100px从我的左侧向右移动section-one

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

接下来是：我希望line转换与我的box元素一起触发。目前这并没有发生。如果我的等待时间超过2s animation-duration line，动画就会在box div弹出屏幕时结束。

Bellow我已经附上了我的代码，这是我的Codepen link。

玉

.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

删除班级时，只需应用动画（检查代码中的评论）：

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用白色元素的转换：

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;