Запуск одной анимации одновременно с другой во время прокрутки

У меня тут небольшая проблема.

Как видите, мой код запускает анимацию, в которой мой box перемещает 100px слева направо, когда я прокручиваю 1/3 высоты блока section-one.

Как видите, в box есть div line, который растет от 0px до 100px.

Вот и загвоздка: я хочу, чтобы переход line запускался вместе с моим элементом box. В настоящее время этого не происходит. Если я жду больше, чем 2s, то есть animation-duration из line, анимация будет завершена к тому времени, когда на экране появится div box.

Ниже я прикрепил свой код, и вот ссылка на сайт к моему 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');
    });
});

jquery html css sass

01.05.2018 23:01

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Решено! Спасибо!

— 01.05.2018 23:12

01.05.2018 23:07