9005人已阅读
&&&&&&之前的文章中已经测试了transform、transitionend、animationend在移动和pc端浏览器的前缀的兼容问题(强烈建议先阅读&和 (针对pc和移动浏览器的前缀问题),如果知道了兼容问题，下面的代码就可以很好理解，现在整理了一下，写成一个简单的原声&js函数，这个函数方法有：
&&&&&&1、addTranEvent(elem,fn,duration)：用于绑定transtionend事件，处理掉多次执行的问题
&&&&& 2、addAnimEvent(elem,fn),removeAnimEvent(elem,fn)：分别用于绑定和解绑animationend事件
&&&&& 3、setStyleAttribute(elem,val)：用于设置css3的属性
&&&&&&通过将之前的文章的代码整理一下，代码不多也很好理解，具体如下：
(function (root, factory) {
&&&&&&&&if (typeof define === 'function') {
&&&&&&&&&&&&define(factory);
&&&&&&&&}else if (typeof exports === 'object') {
&&&&&&&&&&&&module.exports =
&&&&&&&&} else {
&&&&&&&&&&&&root.WN = factory();
})(this,function(){
&&&&&&&&var WN = {},
&&&&&&&&&&&&body=document.body || document.documentElement,
&&&&&&&&&&&&style=body.style,
&&&&&&&&&&&&transition=&transition&,
&&&&&&&&&&&&transitionEnd,
&&&&&&&&&&&&animationEnd,
&&&&&&&&&&&&vendorP
&&&&&&&&transition=transition.charAt(0).toUpperCase() + transition.substr(1);
&&&&&&&&vendorPrefix=(function(){//现在的opera也是webkit
&&&&&&&&&&&&var& i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
&&&&&&&&&&&&while (i & vendor.length) {
&&&&&&&&&&&&&&&&if (typeof style[vendor[i] + transition] === &string&) {
&&&&&&&&&&&&&&&&&&return vendor[i];
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&i++;
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&})();
&&&&&&&&transitionEnd=(function(){
&&&&&&&&&&&&var transEndEventNames = {
&&&&&&&&&&&&&&WebkitTransition : 'webkitTransitionEnd',
&&&&&&&&&&&&&&MozTransition&&& : 'transitionend',
&&&&&&&&&&&&&&OTransition&&&&& : 'oTransitionEnd otransitionend',
&&&&&&&&&&&&&&transition&&&&&& : 'transitionend'
&&&&&&&&&&&&}
&&&&&&&&&&&&for(var name in transEndEventNames){
&&&&&&&&&&&&&&&&if(typeof style[name] === &string&){
&&&&&&&&&&&&&&&&&&&&return transEndEventNames[name]
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})();
&&&&&&&&animationEnd=(function(){
&&&&&&&&&&&&var animEndEventNames = {
&&&&&&&&&&&&&&WebkitAnimation : 'webkitAnimationEnd',
&&&&&&&&&&&&&&animation&&&&& : 'animationend'
&&&&&&&&&&&&}
&&&&&&&&&&&&for(var name in animEndEventNames){
&&&&&&&&&&&&&&&&if(typeof style[name] === &string&){
&&&&&&&&&&&&&&&&&&&&return animEndEventNames[name]
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})();
&&&&&&&&WN.addTranEvent=function(elem,fn,duration){
&&&&&&&&&&&&var called=
&&&&&&&&&&&&var fncallback = function(){
&&&&&&&&&&&&&&&&&&&&if(!called){
&&&&&&&&&&&&&&&&&&&&&&&&fn();
&&&&&&&&&&&&&&&&&&&&&&&&called=
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&};
&&&&&&&&&&&&function hand(){&&&
&&&&&&&&&&&&&&&&elem.addEventListener(transitionEnd, function () {
&&&&&&&&&&&&&&&&&&&&elem.removeEventListener(transitionEnd, arguments.callee, false);
&&&&&&&&&&&&&&&&&&&&&&&&fncallback();
&&&&&&&&&&&&&&&&}, false);
&&&&&&&&&&&&}
&&&&&&&&&&&&setTimeout(hand,duration);
&&&&&&&&};
&&&&&&&&WN.addAnimEvent=function(elem,fn){
&&&&&&&&&&&&elem.addEventListener(animationEnd,fn,false)
&&&&&&&&};
&&&&&&&&WN.removeAnimEvent=function(elem,fn){
&&&&&&&&&&&&elem.removeEventListener(animationEnd,fn,false)
&&&&&&&&};
&&&&&&&&WN.setStyleAttribute=function(elem,val){
&&&&&&&&&&&&if(Object.prototype.toString.call(val)===&[object Object]&){
&&&&&&&&&&&&&&&&for(var name in val){
&&&&&&&&&&&&&&&&&&&&if(/^transition|animation|transform/.test(name)){
&&&&&&&&&&&&&&&&&&&&&&&&var styleName=name.charAt(0).toUpperCase() + name.substr(1);
&&&&&&&&&&&&&&&&&&&&&&&&elem.style[vendorPrefix+styleName]=val[name];
&&&&&&&&&&&&&&&&&&&&}else{
&&&&&&&&&&&&&&&&&&&&&&&&elem.style[name]=val[name];
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&};
&&&&&&&&WN.transitionEnd=transitionE
&&&&&&&&WN.vendorPrefix=vendorP
&&&&&&&&WN.animationEnd=animationE
&&&&&&&&return WN;
&&&&&&代码就是上面那些，就是根据浏览器的前缀来获取属性，然后去设置我们想要的结果，下面用三个demo分别来演示一下：
&&&&& 1、transitionend事件
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&width=device-width,minimum-scale=1.0,maximum-scale=1.0&/&
&title& transitionPlugin&/title&
&script src=&/jquery/1.10.0/jquery.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&/wp-content/themes/temp1/css/reset.css&&
&script type=&text/javascript&&
(function (root, factory) {
&&&&&&&&if (typeof define === 'function') {
&&&&&&&&&&&&define(factory);
&&&&&&&&}else if (typeof exports === 'object') {
&&&&&&&&&&&&module.exports =
&&&&&&&&} else {
&&&&&&&&&&&&root.WN = factory();
})(this,function(){
&&&&&&&&var WN = {},
&&&&&&&&&&&&body=document.body || document.documentElement,
&&&&&&&&&&&&style=body.style,
&&&&&&&&&&&&transition=&transition&,
&&&&&&&&&&&&transitionEnd,
&&&&&&&&&&&&animationEnd,
&&&&&&&&&&&&vendorP
&&&&&&&&transition=transition.charAt(0).toUpperCase() + transition.substr(1);
&&&&&&&&vendorPrefix=(function(){//现在的opera也是webkit
&&&&&&&&&&&&var& i=0, vendor=[&Moz&, &Webkit&, &Khtml&, &O&, &ms&];
&&&&&&&&&&&&while (i & vendor.length) {
&&&&&&&&&&&&&&&&if (typeof style[vendor[i] + transition] === &string&) {
&&&&&&&&&&&&&&&&&&return vendor[i];
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&i++;
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&})();
&&&&&&&&transitionEnd=(function(){
&&&&&&&&&&&&var transEndEventNames = {
&&&&&&&&&&&&&&WebkitTransition : 'webkitTransitionEnd',
&&&&&&&&&&&&&&MozTransition&&& : 'transitionend',
&&&&&&&&&&&&&&OTransition&&&&& : 'oTransitionEnd otransitionend',
&&&&&&&&&&&&&&transition&&&&&& : 'transitionend'
&&&&&&&&&&&&}
&&&&&&&&&&&&for(var name in transEndEventNames){
&&&&&&&&&&&&&&&&if(typeof style[name] === &string&){
&&&&&&&&&&&&&&&&&&&&return transEndEventNames[name]
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})();
&&&&&&&&animationEnd=(function(){
&&&&&&&&&&&&var animEndEventNames = {
&&&&&&&&&&&&&&WebkitAnimation : 'webkitAnimationEnd',
&&&&&&&&&&&&&&animation&&&&& : 'animationend'
&&&&&&&&&&&&}
&&&&&&&&&&&&for(var name in animEndEventNames){
&&&&&&&&&&&&&&&&if(typeof style[name] === &string&){
&&&&&&&&&&&&&&&&&&&&return animEndEventNames[name]
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})();
&&&&&&&&WN.addTranEvent=function(elem,fn,duration){
&&&&&&&&&&&&var called=
&&&&&&&&&&&&var fncallback = function(){
&&&&&&&&&&&&&&&&&&&&if(!called){
&&&&&&&&&&&&&&&&&&&&&&&&fn();
&&&&&&&&&&&&&&&&&&&&&&&&called=
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&};
&&&&&&&&&&&&function hand(){&&&
&&&&&&&&&&&&&&&&elem.addEventListener(transitionEnd, function () {
&&&&&&&&&&&&&&&&&&&&elem.removeEventListener(transitionEnd, arguments.callee, false);
&&&&&&&&&&&&&&&&&&&&&&&&fncallback();
&&&&&&&&&&&&&&&&}, false);
&&&&&&&&&&&&}
&&&&&&&&&&&&setTimeout(hand,duration);
&&&&&&&&};
&&&&&&&&WN.addAnimEvent=function(elem,fn){
&&&&&&&&&&&&elem.addEventListener(animationEnd,fn,false)
&&&&&&&&};
&&&&&&&&WN.removeAnimEvent=function(elem,fn){
&&&&&&&&&&&&elem.removeEventListener(animationEnd,fn,false)
&&&&&&&&};
&&&&&&&&WN.setStyleAttribute=function(elem,val){
&&&&&&&&&&&&if(Object.prototype.toString.call(val)===&[object Object]&){
&&&&&&&&&&&&&&&&for(var name in val){
&&&&&&&&&&&&&&&&&&&&if(/^transition|animation|transform/.test(name)){
&&&&&&&&&&&&&&&&&&&&&&&&var styleName=name.charAt(0).toUpperCase() + name.substr(1);
&&&&&&&&&&&&&&&&&&&&&&&&elem.style[vendorPrefix+styleName]=val[name];
&&&&&&&&&&&&&&&&&&&&}else{
&&&&&&&&&&&&&&&&&&&&&&&&elem.style[name]=val[name];
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&};
&&&&&&&&WN.transitionEnd=transitionE
&&&&&&&&WN.vendorPrefix=vendorP
&&&&&&&&WN.animationEnd=animationE
&&&&&&&&return WN;
&style type=&text/css&&
background:#f60;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function:
-o-transition-timing-function:
transition-timing-function:
.movebox.moving{
height:100
background:#000;
-webkit-transform: translate(150px, 150px) rotate(45deg);
-ms-transform: translate(150px, 150px) rotate(45deg);
-o-transform: translate(150px, 150px) rotate(45deg);
transform: translate(150px, 150px) rotate(45deg);
&div class=&movebox& id=&J_movebox&&&/div&
&div id=&J_text& style=&font-size: 25&&&/div&
&div class=&handguide-btn fixed align-c &&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_movingbtn&&运动&/a&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_returnbeginbtn&&起始位置&/a&
&script type=&text/javascript&&
$(function(){
var $movebox=$(&#J_movebox&),
$resetbtn=$(&#J_returnbeginbtn&),
$text=$(&#J_text&);
$delbtn=$(&#J_delevent&),
$reevent=$(&#J_reevent&),
$movebtn=$(&#J_movingbtn&);
function callback(){
$text.html(&动画结束啦！只执行了一次transitioned&)
$movebtn.on(&click&,function(){
$text.html(&&);
$movebox.addClass(&moving&);
WN.addTranEvent($movebox.get(0),callback,1);
$resetbtn.on(&click&,function(){
$text.html(&&);
$movebox.removeClass(&moving&);
WN.addTranEvent($movebox.get(0),callback,1);
&&&&& 2、animationend事件
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&width=device-width,minimum-scale=1.0,maximum-scale=1.0&/&
&title& animationend&/title&
&script src=&/jquery/1.10.0/jquery.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&/wp-content/themes/temp1/css/reset.css&&
&script type=&text/javascript&&
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
}else if (typeof exports === 'object') {
module.exports =
root.WN = factory();
})(this,function(){
var WN = {},
body=document.body || document.documentElement,
style=body.style,
transition=&transition&,
transitionEnd,
animationEnd,
transition=transition.charAt(0).toUpperCase() + transition.substr(1);
vendorPrefix=(function(){
i=0, vendor=[&Moz&, &Webkit&, &Khtml&, &O&, &ms&];
while (i & vendor.length) {
if (typeof style[vendor[i] + transition] === &string&) {
return vendor[i];
transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition
: 'transitionend',
OTransition
: 'oTransitionEnd otransitionend',
transition
: 'transitionend'
for(var name in transEndEventNames){
if(typeof style[name] === &string&){
return transEndEventNames[name]
animationEnd=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
: 'animationend'
for(var name in animEndEventNames){
if(typeof style[name] === &string&){
return animEndEventNames[name]
WN.addTranEvent=function(elem,fn,duration){
var called=
var fncallback = function(){
if(!called){
function hand(){
elem.addEventListener(transitionEnd, function () {
elem.removeEventListener(transitionEnd, arguments.callee, false);
fncallback();
}, false);
setTimeout(hand,duration);
WN.addAnimEvent=function(elem,fn){
elem.addEventListener(animationEnd,fn,false)
WN.removeAnimEvent=function(elem,fn){
elem.removeEventListener(animationEnd,fn,false)
WN.setStyleAttribute=function(elem,val){
if(Object.prototype.toString.call(val)===&[object Object]&){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.style[vendorPrefix+styleName]=val[name];
elem.style[name]=val[name];
WN.transitionEnd=transitionE
WN.vendorPrefix=vendorP
WN.animationEnd=animationE
return WN;
&style type=&text/css&&
height:100
border:1px solid #5d5d5d;
background: #f60;
.movebox.moving{
height:100
-webkit-transform: translate(100px,0px);
-moz-transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
transform: translate(100px,0px);
-webkit-animation: mymove 1s;
-o-animation: mymove 1s;
animation: mymove 1s;
@keyframes mymove{
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transform: translate(100px,0px);
-moz-transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
transform: translate(100px,0px);
@-webkit-keyframes mymove{
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transform: translate(100px,0px);
-moz-transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
transform: translate(100px,0px);
&div class=&movebox& id=&J_movebox&&&/div&
&div id=&J_text&&&/div&
&div class=&handguide-btn fixed align-c &&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_movingbtn&&运动&/a&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_returnbeginbtn&&起始位置&/a&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_delevent&&移除事件&/a&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_reevent&&恢复事件&/a&
&script type=&text/javascript&&
$(function(){
var $movebox=$(&#J_movebox&),
$text=$(&#J_text&),
$resetbtn=$(&#J_returnbeginbtn&),
$delbtn=$(&#J_delevent&),
$reevent=$(&#J_reevent&),
$movebtn=$(&#J_movingbtn&);
function callback(){
$text.html(&animation结束啦！&)
WN.addAnimEvent($movebox.get(0),callback);
$movebtn.on(&click&,function(){
$text.html(&&);
$movebox.addClass('moving');
$resetbtn.on(&click&,function(){
$text.html(&&);
$movebox.removeClass(&moving&);
$delbtn.on(&click&,function(){
alert(&删除动画事件成功,动画结束后就不会触发任何函数！&)
WN.removeAnimEvent($movebox.get(0),callback);
$reevent.on(&click&,function(){
WN.addAnimEvent($movebox.get(0),callback);
alert(&恢复动画事件成功,动画结束后就会触发函数！&)
&&&&& 3、设置transfrom,transitionDuration的css3属性让元素运动起来
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&width=device-width,minimum-scale=1.0,maximum-scale=1.0&/&
&title& transitionPlugin&/title&
&script src=&/jquery/1.10.0/jquery.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&/wp-content/themes/temp1/css/reset.css&&
&script type=&text/javascript&&
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
}else if (typeof exports === 'object') {
module.exports =
root.WN = factory();
})(this,function(){
var WN = {},
body=document.body || document.documentElement,
style=body.style,
transition=&transition&,
transitionEnd,
animationEnd,
transition=transition.charAt(0).toUpperCase() + transition.substr(1);
vendorPrefix=(function(){
i=0, vendor=[&Moz&, &Webkit&, &Khtml&, &O&, &ms&];
while (i & vendor.length) {
if (typeof style[vendor[i] + transition] === &string&) {
return vendor[i];
transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition
: 'transitionend',
OTransition
: 'oTransitionEnd otransitionend',
transition
: 'transitionend'
for(var name in transEndEventNames){
if(typeof style[name] === &string&){
return transEndEventNames[name]
animationEnd=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
: 'animationend'
for(var name in animEndEventNames){
if(typeof style[name] === &string&){
return animEndEventNames[name]
WN.addTranEvent=function(elem,fn,duration){
var called=
var fncallback = function(){
if(!called){
function hand(){
elem.addEventListener(transitionEnd, function () {
elem.removeEventListener(transitionEnd, arguments.callee, false);
fncallback();
}, false);
setTimeout(hand,duration);
WN.addAnimEvent=function(elem,fn){
elem.addEventListener(animationEnd,fn,false)
WN.removeAnimEvent=function(elem,fn){
elem.removeEventListener(animationEnd,fn,false)
WN.setStyleAttribute=function(elem,val){
if(Object.prototype.toString.call(val)===&[object Object]&){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.style[vendorPrefix+styleName]=val[name];
elem.style[name]=val[name];
WN.transitionEnd=transitionE
WN.vendorPrefix=vendorP
WN.animationEnd=animationE
return WN;
&style type=&text/css&&
height:100
border:1px solid #5d5d5d;
background: #f60;
&div class=&movebox& id=&J_movebox&&&/div&
&div id=&J_text&&&/div&
&div class=&handguide-btn fixed align-c &&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_movingbtn&&运动&/a&
&a href=&javascript:void(0)& class=&wn-btn wn-btn-success& id=&J_returnbeginbtn&&恢复&/a&
&script type=&text/javascript&&
$(function(){
var $movebox=$(&#J_movebox&),
$resetbtn=$(&#J_returnbeginbtn&),
$text=$(&#J_text&);
$movebtn=$(&#J_movingbtn&);
$movebtn.on(&click&,function(){
WN.setStyleAttribute($movebox.get(0),{
transitionProperty:&all&,
transitionDuration:&1s&,
width:&125px&,
transform:&translate(75px,75px) rotate(45deg) skew(10deg,10deg)&
$resetbtn.on(&click&,function(){
WN.setStyleAttribute($movebox.get(0),{
transitionProperty:&all&,
transitionDuration:&1s&,
transform:&&js点击移动+动画
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type"
content="text/ charset=utf-8" /&
&title&jquery点击左移&/title&
&script src="jquery-1.4.js"
type="text/javascript"&&/script&
body{ margin:0 padding:0}
ul,li{ margin:0 padding:0}
li{ list-style: float: margin-left:1}
.list{ width:604 height:200 overflow: border:1px
solid #F00; clear:}
.left{ font-size:35 font-weight: float:
cursor: display:}
.right{ font-size:35 font-weight:float:
margin-left:533cursor:display:}
.ul{ margin-left:0}
language=javascript&
&$(document).ready(function(){
&var ts=0;
&var width=$(".list").width();
$(".left").click(function(){
&if(ts&2){ &
$(".ul").css("margin-left",-width*ts);
$(".ul").css("margin-left",-width*ts);}
$(".right").click(function(){
$(".ul").css("margin-left",-width*ts)
$(".ul").css("margin-left",-width*ts)
//动画效果
class="left"&←&/div&&div
class="right"&→&/div&
&div class="list"&
class="ul"&&
src="image/dianji1.jpg"&&/li&
src="image/dianji1.jpg"&&/li&
src="image/dianji1.jpg"&&/li&
src="image/dianji1.jpg"&&/li&
src="image/dianji2.jpg"&&/li&
src="image/dianji2.jpg"&&/li&
src="image/dianji2.jpg"&&/li&
src="image/dianji2.jpg"&&/li&
src="image/dianji3.jpg"&&/li&
src="image/dianji3.jpg"&&/li&
src="image/dianji3.jpg"&&/li&
src="image/dianji3.jpg"&&/li&
language=javascript&
var width=$(".list").width();
var showpic=self.setInterval("clock()",3000);
function clock(){ & &
& & //动画自运行
&if(ts&2){ts++;$(".ul").css("margin-left",-width*ts);}
else{ ts=0;$(".ul").css("margin-left",-width*ts);}
$(".ul").hover(function(){
clearInterval(showpic); & &
& & //鼠标移动至ul，清除动画
&},function()
&showpic=self.setInterval(function(){
&//鼠标移动开ul，开始动画 &
&if(ts&2){ts++;$(".ul").css("margin-left",-width*ts);}
else{ts=0;$(".ul").css("margin-left",-width*ts);}
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。【求助】js 如何控制animation动画的播放！！_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：128,643贴子：
【求助】js 如何控制animation动画的播放！！收藏
如题，我在一个Div上设置一个5s的横向移动动画，是使用css3的animation实现的。刚进入网页的时候动画会执行，但我想通过button按钮控制动画的播放，该如何写？
javascript,上海达内12校区,美国上市培训机构.领军培训,小班教学,达内javascript,&理论+实战&教学!先就业后付款!不就业免费重学!
初始不加animation样式，点击按钮后再加上。
如果想控制暂停和播放的话有个animation-play-state样式可以用。详见：
初始的时候animation-play-state设置成&paused&，然后用JS控制这个属性，变成running 就会运行。
动画用CSS3的@keyframes命名，然后用样式写个类，里面就是写动画名字，然后一些参数。点击按钮时，添加这个样式的类，就会实现动画效果
.demo1 {-webkit-animation-name:'like_poof';-webkit-animation-duration: .6s;-webkit-animation-timing-function:-webkit-animation-delay: .1s;-webkit-animation-iteration-count:-webkit-animation-direction:-moz-animation: like_poof .6-ms-animation: like_poof .6animation: like_poof .6-moz-animation: like_poof .6}@-webkit-keyframes like_poof {0% {margin-top: -30opacity: 1;-webkit-transform: rotate(0deg)}25% {opacity: 1;-webkit-transform: rotate(-20deg)}75% {-webkit-transform: rotate(20deg)}100% {margin-top: -80opacity: 0;-webkit-transform: rotate(0deg)}}这是我以前做的一个小例子的部分代码，like_poof是我给动画取的名字，需要动画执行的时候，就用JS控制，添加demo1这个类
或者你用JQ的animation函数也可以
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或