html跳转到指定位置动画,使用javascript暂停CSS动画,并跳转到动画中的特定位置

尝试

HTML

CSS

/* css */

#animated {

animation : animationName; /* animation block(s) */

animation-play-state : paused; /* (paused; running) */

}

@keyframes animationName {

0% { .. /* css animations (`animationstart`) */ }

50% {..}

100% { .. /* css animations (`animationend` / `animationiteration` (start; end)) */ }

}

JS

(function(el) {

function animations(e) {

/* `key code` to trigger event */

if (e.which === 123456) {

$(el).animate({ /* jquery animations */ }, 123456 /* duration */)

.promise().done(function() {

el.style.animationPlayState = "running";

el.style.WebkitAnimationPlayState = "running";

});

};

};

$(window).on("keydown", animations);

})($(#animated).get(0))

$(document).ready(function() {

(function reanimate(el, r, p, runner, pauser, pauseAll) {

var _state = function() {

$.when(

$("#animated").data("states", {"fxq": "animated!","cssAnimationState": (el.style.WebkitAnimationPlayState || el.style.animationPlayState),"jsAnimationState": $("#animated").queue("fx")[0]}))

.done(function(status) {

return status.data("states")

});

return String("css animation state: " + (el.style.WebkitAnimationPlayState || el.style.animationPlayState) + "  js animation state: " + $("#animated").queue("fx")[0])

};

var runner = function() {

el.style.animationPlayState = "running";

el.style.WebkitAnimationPlayState = "running";

return $("data").html(_state())

};

var pauser = function() {

el.style.animationPlayState = "paused";

el.style.WebkitAnimationPlayState = "paused";

$("#animated:animated, #animated *").finish().queue("fx", []);

return $("data").html(_state())

};

$("button:last").on("click", pauser);

$("button:first").on("click", runner);

function player(e, pause, play, pauseAll) {

/*!

// settings

*/

var pauseAll = (undefined || 38); /* `up-arrow` : `pauseAll` */

var pause = (undefined || 37); /* `left-arrow` : `paused` */

var play = (undefined || 39); /* `right-arrow` : `running` */

if (e.which === play) {

e.preventDefault();

runner();

$("data").html(_state())

};

/*!

// js (jquery) animations (, css transitions,

// css animations) at `paused` css animations

*/

if (e.which === pause) {

e.preventDefault();

$.when(

$('#animated')

.animate({

width: "+=400px",

height: "+=400px",

borderRadius: "+=50%",

fontSize: "+=22px"

},

{

duration: 3500,

easing: "swing",

start: $('#animated').css({"transition": "background 3500ms linear, box-shadow 3500ms linear","-webkit-transition": "background 3500ms linear, -webkit-box-shadow 3500ms linear","-moz-transition": "background 3500ms linear, -moz-box-shadow 3500ms linear","background": "yellow","box-shadow": "0.25em 0.25em 0.25em #f57900","-webkit-transform-style": "preserve-3d","-webkit-transform": "rotateX(180deg) rotateZ(45deg)","-moz-transform-style": "preserve-3d","-transform": "rotateX(180deg) rotateZ(45deg)","-webkit-backface-visibility": "visible","-moz-backface-visibility": "visible"}).html(function() {

return $("" + $('#animated').data("states").fxq + "").css({"display": "block","position": "relative","top": "25%","left": "0%","transform": "rototeX(33deg)","text-shadow": "2px 2px 2px orange"}).fadeIn(2000, function() {

_state()

})

})

})

.animate({width: "100px",height: "100px",

borderTopLeftRadius: "0%",

borderTopRightRadius: "0%",

borderBottomLeftRadius: "0%",

borderBottomRightRadius: "0%",

fontSize: "10px"}, {

duration: 3500,

easing: "linear",

done: function() {

$('#animated').css({"transition": "background 3500ms ease-out, box-shadow 2500ms ease-out","-webkit-transition": "background 3500ms, -webkit-box-shadow 3500ms ease-out","-moz-transition": "background 3500ms ease-out, -moz-box-shadow 3500ms ease-out","background": "red","box-shadow": "0.0em 0.0em 0.0em transparent","-webkit-transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","-moz-backface-visibility": "hidden","-webkit-backface-visibility": "hidden"}).children("em").fadeOut(2000, function() {

_state()

}).promise().done(function() {

$("em").finish().detach()

})

}

}), $("data").html(_state())).promise().done(function() {

runner();

}).always(function() {_state()})

};

/*!

// pause all css and js animations

*/

if (e.which === pauseAll) {

e.preventDefault();

(function() {

var _check = ($("#animated").queue("fx")[0] != undefined ? $("#animated:animated, #animated *").finish() && pauser() : ((el.style.animationPlayState === undefined ? el.style.WebkitAnimationPlayState : el.style.animationPlayState) === "running" ? pauser() : runner()))

return $.when(_check, $("data").html(_state()))

}())

};

};

$(window).on("keydown", player);

return $("data").html(_state())

})($("#animated").get(0), "running", "paused")

})

可能有几种可能的方法来完成要求,

包括CSSOM,Javascript,jQuery库.见链接.

启动和暂停css动画可以通过

动画播放状态属性.

启动和停止jquery动画可以通过几种方式完成.

$(element).queue(“fx”,[])应该停止所有jquery动画并清除

jquery动画队列. .finish()应该完成,或者完成当前的

运行或进行jquery动画.

动画播放状态：暂停不会停止jquery动画.

这个过程也可以通过插入,替换,

或删除样式元素,或仅删除样式元素中的文本;

animationstart和animationiteration DOM事件;和其他一些潜力

下面链接的选项.

将片段reanimate.js放在一起,包括几个

上述方法. css过渡包括在内

在jquery动画中,虽然这部分可能

被替换为访问精确的计时阶段

运行css动画(“@ keyframes”)和/或插入新动画;

或调整或重新定义时间.

这篇文章只是一个工作草案模板,以分享起诉功能.

注意,webkit,firefox和opera可能会略微不同地“渲染”动画.

使用此模板webkit可能看起来“过渡”更“平滑”

到一个“运行”的CSS动画比火狐.完全歌剧支持可能需要一些

更精细的调整.

Opera似乎使用-o-和-webkit-前缀来表示某些css属性,

而对其他人仅使用w3c标准(无前缀).此外,每个浏览器

可能需要不同的“前缀”来访问“animationstart”等.

reanimate.js当前没有(版本1.0)尝试访问确切的css

在中断之前运行的css动画中的/关键帧'(elapsedTime)

他们有几个分层或“复活”的css / js动画和/或css过渡.

而是试图将css动画返回到近似位置

他们在“分层”js动画中断之前运行.虽然,它应该

可以访问关键帧的精确动画elapsedTime或timeStamp(可能是0或miiliseond类型的时间戳,具体取决于浏览器).例如,

通过评估“animationiteration”或“animationstart”或“animationend”事件,

或者可能使用“requestAnimationFrame”.

资源：

希望这可以帮助