css3在结束时暂停,在实际位置/状态上中断/停止CSS3过渡

小编典典

无需深入了解插件，只需css3animate使用当前( 计算的 )所需道具的值来重新使用您的方法，并将持续时间设置为0(

在插件中为1，因为您使用!speed来使用默认值。)

所以在示例中使用

var $animated = $('div');

$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);

会成功的

当然，您应该针对正在使用的当前属性自动执行此操作。如果在启动动画时使用计时器，而在有人使用stop方法时使用计时器，则还可以模拟暂停/继续功能。

更新

您可以将cssObject传递给动画的内容存储到data元素的，并在它们的停止循环上存储它们以获取当前值。

因此，在您的animation方法中，您可以$obj.data('animationCss', cssObject);并且在stop方法中

stop : function( clearQueue,jumpToEnd ){

return this.each(function(){

var $that = $(this);

var currentCss = {};

var animationCss = $that.data('animationCss');

for (var prop in animationCss)

currentCss[prop] = $that.css(prop);

if (jumpToEnd)

{

animation($that,currentCss,1, function(){animation($that,animationCss,1)});

}

else

{

animation($that,currentCss,1);

}

console.log("stop was called");

});

}

2020-05-16