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

时间：2018-08-23 11:23:25

标签： javascript jquery css css-animations wow.js

当您滚动到它时，我有一个要动画的代码片段（如下）。它正在工作，但同时激活了激活圆的类，这使它看起来很不正确。如何使圆圈正常填充而不是在两个单独的动画中填充？我是否需要延迟？如果添加延迟然后更改百分比，会发生什么？那么延迟会取消吗？

我正在使用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>

3 个答案:

答案 0 :(得分：0)

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

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

1s是延迟时间

答案 1 :(得分：0)

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

与data-wow-duration一起使用似乎很方便

here在“高级选项”下进行了描述。

答案 2 :(得分：0)

完成此工作。请看下面：

在此处的代码笔上效果更好：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>

相关问题
最新问题