如何阻止 CSS3 动画在播放一次后运行并调用新动画
How can I stop a CSS3 animation from running after it has played once and call a new one in?
现在我正在开发一个响应式滑块,我正在为第一组调用动画。我的滑块是一个网格系统,在 HTML 中设置为两个 li 类。一个被标记为"负载",另一个被称为"过渡"。
我遇到的问题是我的网站有一个预加载器预先加载所有内容,所以一旦加载栏完成,网格就会加载进来,第一个 li 类进来,"加载",并通过 animateUp 动画出现。
因此,当第一组进入时,它通过动画向上移动,如果用户激活下一个 li 类,它将过渡到淡入淡出。但是,我希望能够通过按向右箭头键来阻止我的用户围绕网格旋转,而是在第二个 li 处停止他们并强制用户使用后退键返回第一个子级,并阻止 animateUp 继续并让第一个 li 类在 animateUp 播放后采用过渡。
这是 jsFiddle 以获得更好的想法 http://jsfiddle.net/BNq6t/1/embedded/result/
您可以使用箭头键导航(右/左)
(请注意,当您绕回第一个孩子时,animateUp 是如何播放的)
该目录
<div id="slider">
<ul>
<!-- #slider js PAGE 1 -->
<li class="load">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio5.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio3.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio9.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/sample8.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/sample4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio2.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio6.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/readli.png">
</li>
<!-- / PAGE 1 -->
<!-- #slider js PAGE 2 -->
<li class="transition">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
<img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
</li>
<!-- / PAGE 2 -->
</ul>
</div>
滑块
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 500, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
})
}
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 500, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
})
}
$('#back').click(function () {
moveRight();
})
$('#next').click(function () {
moveRight();
})
$('#next').click(function () {
if (('#next').click = clicked) {
('#back:after').css('visbilility: visible;')
}
})
$(document).keydown(function(e) {
if (e.keyCode == 39) {
moveRight();
} else {
}
})
$(document).keydown(function(e) {
if (e.keyCode == 37) {
moveLeft();
} else {
}
})
});
CSS的
#slider li.load img:nth-child(-n+3) {
animation: pushUp 2.4s linear;
-webkit-animation: pushUp 2.4s linear;
-moz-animation: pushUp 2.4s linear;
-o-animation: pushUp 2.4s linear;
}
#slider li.load img:nth-child(4),
#slider li.load img:nth-child(5),
#slider li.load img:nth-child(6) {
animation: pushUp .5s linear;
-webkit-animation: pushUp .5s linear;
-moz-animation: pushUp .5s linear;
-o-animation: pushUp .5s linear;
}
#slider li.load img:nth-child(7),
#slider li.load img:nth-child(8),
#slider li.load img:nth-child(9) {
animation: pushUp 1.1s linear;
-webkit-animation: pushUp 1.1s linear;
-moz-animation: pushUp 1.1s linear;
-o-animation: pushUp 1.1s linear;
}
#slider li.transition img {
animation: fadeIn .55s;
-webkit-animation: fadeIn .55s;
-moz-animation: fadeIn .55s;
-o-animation: fadeIn .55s;
}
谢谢。(关于图像,这篇文章中的代码也与jsFiddle中的代码不同)
有一个iteration-count
属性。
你可以使用它。
以下是所有"无前缀"属性:
animation-name:
animation-duration:
animation-iteration-count:
animation-direction:
animation-timing-function:
animation-fill-mode:
animation-delay:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
相关文章:
- 动画、计时和运行循环等问题
- HTML5(Bootstrap)通过函数调用运行动画
- 为什么我的脚本正在运行动画,但没有显示它
- 画布动画似乎不会以60帧/秒的速度运行
- 找不到在 create-js 中运行的动画,未列出任何错误
- 在动画运行时获取矩形的坐标
- 防止请求动画帧一直运行
- 在使用 jQuery 单击不相关的按钮后,如何防止特定动画运行
- jQuery 动画运行一次
- 动画运行完毕后重新启动动画
- 动画运行速度较慢,并且在chrome中没有重新加载页面就不能重播
- requestAnimationFrame动画运行得越来越慢
- YUI:在动画运行时停止事件处理程序的触发
- 动画运行时更新动画速度
- 如何保持横幅动画运行,而改变网页
- Velocity JS动画运行时忽略单击事件
- jQuery动画运行了很多次
- jQuery javascript:当窗口被调整大小时,我如何停止正在进行的动画运行
- 防止在当前动画运行时跳到下一个动画的开头
- 链接点击计数动画运行一次