css animation 语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
参数:
场景:点击下面pagination弹出上方大圆球,要求动画起始点为点击的pagination的位置。
解析:动画实现很简单,大概这样:
@-webkit-keyframes fadeInContent4 {
from {
opacity: 0.3;
-webkit-transform: translate3d(665px, 8px, 0) scale3d(0.254, 0.114, 1);
transform: translate3d(665px, 8px, 0) scale3d(0.254, 0.114, 1);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes fadeInContent4 {
from {
opacity: 0.3;
-webkit-transform: translate3d(665px, 8px, 0) scale3d(0.254, 0.114, 1);
transform: translate3d(665px, 8px, 0) scale3d(0.254, 0.114, 1);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
.fadeInContent4 {
-webkit-animation-name: fadeInContent4;
animation-name: fadeInContent4;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
}
执行动画:$(".content-animation").addClass("fadeInContent4");
但是:
这里有4个pagination(动态的话就是n个),意味着上面css的代码要copy 4份,然后去修改translate
参数,所以推荐使用js循环insertRule
去插入动画样式。
function insertAnimationStyle() {
let styleEl = document.createElement('style');
document.head.appendChild(styleEl);
$(".tab-menu li").each(function (index, element) {
// element == this
var tabtopLoaction = -232 + 60 * (index);
var tabItemAnimation3 = " \
.fadeInContent" + index +" {\
-webkit-animation-name: fadeInContent" + index +";\
animation-name: fadeInContent" + index +";\
-webkit-animation-duration: 0.3s;\
animation-duration: 0.3s;\
}\
";
styleEl.sheet.insertRule(tabItemAnimation3, 0);
var tabItemAnimation2 = " \
@keyframes fadeInContent" + index +" {\
from {\
opacity: 0.3;\
-webkit-transform:translate3d(665px, " +tabtopLoaction +"px, 0) scale3d(0.254,0.114, 1);\
transform: translate3d(665px, " +tabtopLoaction + "px, 0) scale3d(0.254,0.114, 1);\
}\
to {\
opacity: 1;\
-webkit-transform:translate3d(0, 0, 0) scale3d(1,1,1);\
transform:translate3d(0, 0, 0) scale3d(1,1,1);\
}\
}";
styleEl.sheet.insertRule(tabItemAnimation2, 0);
var tabItemAnimation1 = " \
@-webkit-keyframes fadeInContent" + index +" {\
from {\
opacity: 0.3;\
-webkit-transform: translate3d(665px, " + tabtopLoaction +"px, 0) scale3d(0.254,0.114, 1);\
transform: translate3d(665px, " +tabtopLoaction +"px, 0) scale3d(0.254,0.114, 1);\
}\
to {\
opacity: 1;\
-webkit-transform: translate3d(0, 0, 0) scale3d(1,1,1);\
transform: translate3d(0, 0, 0) scale3d(1,1,1);\
}\
}";
styleEl.sheet.insertRule(tabItemAnimation1, 0);
});
};
执行动画:
$tabMenu.on('click', function () {
var clickIndex = $(this).index();
$(".content-wapper").addClass("fadeInContent" + clickIndex);
var fankanv = "fadeInContent" + clickIndex;
$(".content-animation").css('animation', '' + fankanv + ' 0.6s ease 0s 1 normal none running');
});
Debug:
这里一定要注意每次
insertRule
的参数只能有一条cssStyle
错误日志:
火狐报错firefox: SyntaxError: An invalid or illegal string was specified
谷歌报错google: Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule
mozilla文档解释insertRule错误(👇如果你遇到上面的问题请点这里)
说的非常清楚,一次只能插入一条。
over,这篇主要记录一下前端debug的过程,百度是不可能百度了,只有stackoverflow这样子
补充:
这里安利一下:animation.css,animation.css已经帮我们实现了很多常用的加载动画,真的很方便,star竟然比webpak还高😂
添加动画:
$(element).addClass("animated fadeInUpBig");
动画完成监听:
$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
//todo
$(".tab-menu li").each(function (index, element) {
// element == this
var listarttime = index * 100;
setTimeout(function () { //循环添加动画
$(element).show();
$(element).addClass("animated fadeInUpBig");//这里注意this作用域
}, listarttime);
});
});