Как активировать анимацию после завершения другой анимации

Question

Как активировать анимацию после завершения другой анимации

У меня есть фрагмент кода (ниже), который я хочу анимировать, когда вы переходите к нему. Это работает, но классы, которые оживляют круг, активируются одновременно, что делает его неправильным. Как я могу заставить круг заполняться нормально, а не в двух отдельных анимациях? Нужна ли мне задержка для этого, и что произойдет, если я добавлю задержку, а затем изменю процент? Будет ли задержка тогда выключена?

Я использую wow.js, чтобы активировать это при прокрутке.

Если вы хотите вместо этого отредактировать кодовую ручку, поскольку я использую для этого SCSS, но, очевидно, не могу включить это в мой фрагмент здесь.

var wow = new WOW({
  animateClass: 'fill'
});
wow.init();

#sample-text {
  width: 20%;
}

.circle-wrap {
  width: 150px;
  height: 150px;
  background: #ddd;
  border-radius: 50%;
}

.circle-wrap .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .mask {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #00B16A;
}

.circle-wrap .circle .mask.full,
.fill {
  animation: fill ease-in-out 3s;
  transform: rotate(170deg);
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(170deg);
  }
}

.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="circle-wrap">
  <div class="circle">
    <div class="mask full">
      <div class="fill wow"></div>
    </div>
    <div class="mask half">
      <div class="fill wow"></div>
    </div>
    <div class="inside-circle">
      95%
    </div>
  </div>
</div>

0

javascript jquery css css-animations wow.js

Источник

user10175775 23 авг '18 в 11:23

3 ответа

Решение

Вы можете добавить задержку для анимации, как это

animation: fill 3s ease-in-out 1s;

Где 1с задержка

0

Источник

user10258445 23 авг '18 в 11:36

Вы пытались использовать data-wow-delay вариант?

Похоже, это может быть удобно в сочетании с data-wow-duration

Они описаны здесь в разделе "Дополнительные параметры".

0

Источник

user3937008 23 авг '18 в 12:07

Другие вопросы по тегам javascript jquery css css-animations wow.js

user10175775 28 авг '18 в 08:16 2018-08-28 08:16 · Accepted Answer · 2018-08-28 08:16

Получил это работает. Пожалуйста, смотрите ниже:

Это лучше работает на codepen здесь: https://codepen.io/digitalbydefault/pen/LJYPXw

$(window).on('scroll', function() {
  var position = $(this).scrollTop();
  if( position >= $('.circle-wrap').scrollTop() ) {
    $('.trigger').addClass('animate');
  } else {
    $('.trigger').removeClass('animate');
  }
});

#sample-text {
  width: 20%;
}

.circle-wrap {
  width: 150px;
  height: 150px;
  background: #ddd;
  border-radius: 50%;
}
.circle-wrap .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #00B16A;
}
.circle-wrap .mask {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
}

.full.ninety,
.ninety fill {
  transform: rotate(170deg);
}

.ninety.full.animate,
.ninety.animate .fill {
  animation: ninety linear 3s forwards;
}

@keyframes ninety {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(170deg);
  }
}
.full.seventy,
.seventy fill {
  transform: rotate(170deg);
}

.seventy.full.animate,
.seventy.animate .fill {
  animation: seventy linear 3s forwards;
}

@keyframes seventy {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(130deg);
  }
}
.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="circle-wrap">
  <div class="circle">
    <div class="mask full seventy trigger">
      <div class="fill"></div>
    </div>
    <div class="mask half seventy trigger">
      <div class="fill"></div>
    </div>
    <div class="inside-circle">
      95%
    </div>
  </div>
</div>