如何确定动画速度？ [英] How could I fix the animation speed?
本文介绍了如何确定动画速度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码（请参见下面的代码）。它有效但是我有以下问题。向下滚动并开始播放动画时，需要一段时间才能完成整个动画（大约4秒钟）。换句话说，它的开始非常慢。
我试图从JS和CSS过渡中删除慢速，但我没有走运，无论是进度
代码的想法是，当您向下滚动动画开始时，它应该具有正常的速度。
我该如何解决此错误？
谢谢
< pre class = snippet-code-js lang-js prettyprint-override>
函数isScrolledIntoView（elem）{var docViewTop = $（window）.scrollTop（）; var docViewBottom = docViewTop + $（window）.height（）; var elemTop = $（elem）.offset（）。top; var elemBottom = elemTop + $（elem）.height（）; return（（elemBottom< = docViewBottom）&&（elemTop> = docViewTop））;} var IsViewed = false; $（document）.scroll（function（）{$（。progress div）。each（ function（）{var display = $（this），currentValue = parseInt（display.text（）），nextValue = $（this）.attr（ data-values），diff = nextValue-currentValue，step =（0< ; diff？1：-1）; if（nextValue == 0）{$（display）.css（ padding， 0）;} else {$（display）.css（ color， #fff）。animate（{ width：nextValue +％}， slow）;}}）;}）;
.progress-bar {background-color：＃53dceb;高度：12px； -webkit-transition：宽度1.5s缓入；过渡：宽度1.5s缓入；}
< head> < link href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css rel = stylesheet< / head>< body> < div style = background-color：＃f5f5f5> < div class = container> < div style = padding-top：2.5rem！important; padding-bottom：2.5rem class = row> < div class = col-12> < h3>技能< / h3> < hr style = padding-bottom：1.5rem class = hr-dashes-yellow> < div id = pbar class = row> <！-Skills-block-1-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill1-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number1< span class = pull-right> 30％< / span>< / h5> < div id = test class = progress> < div class = progress-bar data-values = 30 style = color：rgb（255，255，255）;> < / div> < / div> < / div> <！-Skill2-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number2< span class = pull-right> 100％< / span>< / h5> < div class = progress> < div data-values = 100 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill3-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number3< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill5-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number4< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> < / div> <！-Skills-block-2-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill10-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number5< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill11-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number6< span class = pull-right> 70％< / span>< / h5> < div class = progress> < div data-values = 70 class = progress-bar style = color：rgb（255，255，255）;< / div> < / div> < / div> <！-Skill12-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number7< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill13-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number8< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> < / div> <！-Skills-block-3-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill19-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number9< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar>< / div> < / div> < / div> <！-Skill20-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number10< span class = pull-right> 40％< / span>< / h5> < div class = progress> < div data-values = 40 class = progress-bar>< / div> < / div> < / div> <！-Skill21-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number11< span class = pull-right> 50％< / span>< / h5> < div class = progress> < div data-values = 50 class = progress-bar>< / div> < / div> < / div> <！-Skill22-> < div style = margin-bottom：2rem> < h5 style = color：＃666> number12< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar>< / div> < / div> < / div> < / div> < / div>< / body><脚本src = https://code.jquery.com/jquery-3.1.1.min.js>< / script><脚本src = https ：//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js>< / script>< script src = https://maxcdn.bootstrapcdn.com/ bootstrap / 4.0.0-alpha.6 / js / bootstrap.min.js>< / script>
解决方案
您要在每个滚动事件上绑定动画-您需要先检查动画是否已经在动画，然后再进行动画：
函数isScrolledIntoView（elem）{var docViewTop = $（window）.scrollTop（）; var docViewBottom = docViewTop + $（window）.height（）; var elemTop = $（elem）.offset（）。top; var elemBottom = elemTop + $（elem）.height（）; return（（elemBottom< = docViewBottom）&&（elemTop> = docViewTop））;} var IsViewed = false; $（document）.scroll（function（）{//每次滚动控制台时都会运行此代码。 log（'scrolling'）; //稍微滚动一下，看看有多少次被记录-这就是您在$（。progress div）下运行代码的次数。each（function（）{var display = $（this），currentValue = parseInt（display.text（）），nextValue = $（this）.attr（ data-values），diff = nextValue-currentValue，step =（0
.progress-bar {background-color：＃53dceb;高度：12px； -webkit-transition：宽度1.5s缓入；过渡：宽度1.5s缓入；}
< head> < link href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css rel = stylesheet< / head>< body> < div style = background-color：＃f5f5f5> < div class = container> < div style = padding-top：2.5rem！important; padding-bottom：2.5rem class = row> < div class = col-12> < h3>技能< / h3> < hr style = padding-bottom：1.5rem class = hr-dashes-yellow> < div id = pbar class = row> <！-Skills-block-1-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill1-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number1< span class = pull-right> 30％< / span>< / h5> < div id = test class = progress> < div class = progress-bar data-values = 30 style = color：rgb（255，255，255）;> < / div> < / div> < / div> <！-Skill2-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number2< span class = pull-right> 100％< / span>< / h5> < div class = progress> < div data-values = 100 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill3-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number3< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill5-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number4< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> < / div> <！-Skills-block-2-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill10-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number5< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill11-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number6< span class = pull-right> 70％< / span>< / h5> < div class = progress> < div data-values = 70 class = progress-bar style = color：rgb（255，255，255）;< / div> < / div> < / div> <！-Skill12-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number7< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> <！-Skill13-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number8< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar style = color：rgb（255，255，255）;>< / div> < / div> < / div> < / div> <！-Skills-block-3-> < div class = col-lg-4 col-md-6 col-sm-4> <！-Skill19-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number9< span class = pull-right> 90％< / span>< / h5> < div class = progress> < div data-values = 90 class = progress-bar>< / div> < / div> < / div> <！-Skill20-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number10< span class = pull-right> 40％< / span>< / h5> < div class = progress> < div data-values = 40 class = progress-bar>< / div> < / div> < / div> <！-Skill21-> < div style = margin-bottom：2rem> < h5 style = color：＃666> Number11< span class = pull-right> 50％< / span>< / h5> < div class = progress> < div data-values = 50 class = progress-bar>< / div> < / div> < / div> <！-Skill22-> < div style = margin-bottom：2rem> < h5 style = color：＃666> number12< span class = pull-right> 60％< / span>< / h5> < div class = progress> < div data-values = 60 class = progress-bar>< / div> < / div> < / div> < / div> < / div>< / body><脚本src = https://code.jquery.com/jquery-3.1.1.min.js>< / script><脚本src = https ：//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js>< / script>< script src = https://maxcdn.bootstrapcdn.com/ bootstrap / 4.0.0-alpha.6 / js / bootstrap.min.js>< / script>
I have the following code (See the code below). It works BUT i have the following issue. When you scroll down and the animation starts, it takes ages to complete the full animation (around 4 seconds). In other words it start very very slow.
I have tried to remove the "slow" from the JS and the CSS transition but I have had not luck, either the progress bars animation stop working or they keep doing the animation very slow.
The idea behind the code is, when you scroll down the animation start and it should have a normal speed.
How could I fix this bug?
Thanks
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function() {
$(".progress div").each(function() {
var display = $(this),
currentValue = parseInt(display.text()),
nextValue = $(this).attr("data-values"),
diff = nextValue - currentValue,
step = (0 < diff ? 1 : -1);
if (nextValue == "0") {
$(display).css("padding", "0");
} else {
$(display).css("color", "#fff").animate({
"width": nextValue + "%"
}, "slow");
}
});
});
.progress-bar {
background-color: #53dceb;
height: 12px;
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background-color: #f5f5f5">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<h3>Skills</h3>
<hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">
<div id="pbar" class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
<div id="test" class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-2-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill10-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill11-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
<div class="progress">
<div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill12-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill13-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-3-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill19-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar"></div>
</div>
</div>
<!-- Skill20-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
<div class="progress">
<div data-values="40" class="progress-bar"></div>
</div>
</div>
<!-- Skill21-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
<div class="progress">
<div data-values="50" class="progress-bar"></div>
</div>
</div>
<!-- Skill22-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar"></div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
解决方案
You are binding the animation on every scroll event - you need to check if it is already animating before animating again:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function() { // this code is run everytime you scroll
console.log('scrolling'); // scroll a little bit and see how many times this is logged - that is how many times you run the code below
$(".progress div").each(function() {
var display = $(this),
currentValue = parseInt(display.text()),
nextValue = $(this).attr("data-values"),
diff = nextValue - currentValue,
step = (0 < diff ? 1 : -1);
if (!display.is(':animated')) { // this checks to see if you are currently animating - if you are, you do not want to start the animation again (otherwise you get that slow start you were seeing)
if (nextValue == "0") {
$(display).css("padding", "0");
} else {
$(display).css("color", "#fff").animate({
"width": nextValue + "%"
}, "fast");
}
}
});
});
.progress-bar {
background-color: #53dceb;
height: 12px;
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background-color: #f5f5f5">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<h3>Skills</h3>
<hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">
<div id="pbar" class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
<div id="test" class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-2-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill10-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill11-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
<div class="progress">
<div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill12-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill13-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-3-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill19-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar"></div>
</div>
</div>
<!-- Skill20-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
<div class="progress">
<div data-values="40" class="progress-bar"></div>
</div>
</div>
<!-- Skill21-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
<div class="progress">
<div data-values="50" class="progress-bar"></div>
</div>
</div>
<!-- Skill22-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar"></div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
这篇关于如何确定动画速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
