如何在 jquery transit 中暂停和重新启动 css3 转换
Posted
技术标签:
【中文标题】如何在 jquery transit 中暂停和重新启动 css3 转换【英文标题】:How to pause and restart a css3 transition in jquery transit 【发布时间】:2013-11-10 02:28:53 【问题描述】:我正在使用 jquery transit 来移动和元素。我想暂停动画并单击按钮继续。但我不知道该怎么做。
JSFiddle : http://jsfiddle.net/b4hwq/2/
我试过了
stop().transition();
但它正在引发错误。
【问题讨论】:
【参考方案1】:你可以使用clearQueue()
来停止动画
clearQueue() : 停止队列中剩余的函数
jsFiddle here
HTML
<div class="box"></div>
<button id="restartTransition">Click Me</button>
CSS
.box
opacity: 0.8;
position: absolute;
left: 0;
top: 5%;
background: #505060;
border-radius: 1px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
z-index: 2;
jQuery
$(document).ready(function()
$("#restartTransition").on("click", function()
$('.box').clearQueue().transition( x: '0px' ,10);
$('.box').transition( x: '350px' ,5000);
);
);
【讨论】:
谢谢donovan,但我想暂停动画并从我暂停的地方继续。上面的代码不会暂停它。 我认为公交不可能。没有办法解决这个问题。也许使用 animate() 能够执行 stop()。【参考方案2】:我已经用运输库中的完整功能更新了小提琴:
$('.box').transition(
x: '350px',
duration: 5000,
complete: function()
alert("complete!");
);
jsfiddle
即使使用 clearQueue() 或 stop() 仍会执行完整函数
【讨论】:
【参考方案3】:.stop()
的大部分时间你都在那里,我只是添加了一点逻辑来告诉它停止时该怎么做。
Working Example
$('button').click(function ()
if (!$('.box').hasClass('stop')) // if the box does not have class "stop"
$('.box').stop().transition( // stop the transition
x: $('.box').offset().left + $('.box').width() / 2 // where the box should be when it stops
, 1).addClass('stop'); // simple add class for easy button control
else // if the box has class "stop"
$('.box').transition(
x: '350px'
, 5000).removeClass('stop'); // continue with regularly scheduled programming then remove "stop"
);
【讨论】:
以上是关于如何在 jquery transit 中暂停和重新启动 css3 转换的主要内容,如果未能解决你的问题,请参考以下文章
在组件中加载初始数据时,如何在 react-transition-group 中暂停动画?