使用JS后台刷新数据后如何重新执行CSS animation？
[问题点数：100分，结帖人stray11]
本版专家分：10
结帖率 100%
CSDN今日推荐
本版专家分：21593
2013年4月 Web 开发大版内专家分月排行榜第二
2017年12月 Web 开发大版内专家分月排行榜第三2013年3月 Web 开发大版内专家分月排行榜第三
本版专家分：10
匿名用户不能发表回复！
其他相关推荐js直接操作css3属性transition/webkitTransform实现动画
发表于 11:56:50|
来源webkfa|
作者小猪仔
摘要：js直接操作css3属性transition/webkitTransform实现动画
相关:&下面代码运行要在支持html5+css3的浏览器运行代码
&!-- webkfa.com --&
&!DOCTYPE html&
&meta charset="utf-8" /&
&meta name="apple-touch-fullscreen" content="YES" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
&meta name="apple-mobile-web-app-capable" content="yes" /&
&meta name="format-detection" content="telephone=no" /&
&title&js直接操作css3属性transition和webkitTransform实现动画&/title&
&input type="button" value="往下" onclick="xia(100);"/&
&input type="button" value="往上" onclick="shang(0);"/&
&div style="width:50height:50background:" id="webkfaid"&&/div&
&script type="text/javascript"&
function xia(sum){
var obj=document.getElementById("webkfaid");
obj.style.transition="-webkit-transform 500ms ease-out";
obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
function shang(sum){
var obj=document.getElementById("webkfaid");
obj.style.transition="-webkit-transform 500ms ease-out";
obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
童颜巨乳妹诱人写真令人喷血
羽毛球场上酥胸美女上演极致诱惑
极品尤物! 火辣姐妹花双飞诱惑
学到老在线代码浏览器animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作CSS3动画效果，但还是建议看看 animate.css的代码，也许你能从中学到一些东西。
先扩展个jquery.animate.js插件吧
(function($){
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
})(jQuery);
1、首先引入animate css文件1、首先引入animate.css,jquery.animate.js文件
&link rel="stylesheet" href="animate.min.css"&
&script src="jquery.animate.js"&&/script&
2、给指定的元素加上指定的动画样式名
&div class="animated fadeInLeft"&&/div&
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
效果可以包括：bounce、flash、pulse、rubberBand、shake、headShake、swing、tada、wobble、jello、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeOut、fadeOutDown、fadeOutDownBig、fadeOutLeft、fadeOutLeftBig、fadeOutRight、fadeOutRightBig、fadeOutUp、fadeOutUpBig、flipInX、flipInY、flipOutX、flipOutY、lightSpeedIn、lightSpeedOut、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、hinge、rollIn、rollOut、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、slideInDown、slideInLeft、slideInRight、slideInUp、slideOutDown、slideOutLeft、slideOutRight、slideOutUp等任选一个.
$(function(){
$('.animated').animateCss('bounceOutLeft');
你还未登录，请选登录!
分享HTML我帮您
收款人：邓志锋 luc***@126.com
收款人：向html580网站(**锋)付钱js实现的图片轮播切换动画用transition实现怎么实现没有拉回的过渡效果。
[问题点数：40分]
本版专家分：0
结帖率 50%
CSDN今日推荐
本版专家分：124348
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年7月 Web 开发大版内专家分月排行榜第二2018年6月 Web 开发大版内专家分月排行榜第二2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！
其他相关推荐赞助商推荐()：