如何在另一个动画完成后激活一个动画

Question

我有一个代码片段（如下），当您滚动到它时，我想对其进行动画处理。它正在工作，但是使圆圈动画的类同时激活，这使得它看起来不对。我怎样才能让圆圈正常填满而不是在两个单独的动画中？我是否需要为此延迟，如果我添加延迟然后更改百分比会发生什么？那么延迟会关闭吗？

我正在使用 wow.js 在滚动时激活它。

如果您想编辑 codepen，因为我为此使用 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>

Answer 1

您可以像这样为动画添加延迟

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

其中 1s 是延迟

Answer 2

您尝试过使用 data-wow-delay 选项吗？

似乎与 data-wow-duration

结合使用会很方便

here 在 'Advanced Options' 下对其进行了描述。

Answer 3

成功了。请看下面：

在此处的 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>

如何在另一个动画完成后激活一个动画

How to activate an animation after another animation has finihed

javascript

jquery

css

css-animations

wow.js