Animate.css动画库,简朴的运用,以及源码理会
从2019-nCoV趋势预测问题,联想到关于网络安全态势预测问题的讨论
animate.css是什么?能做些什么?
animate.css是一个css动画库,运用它能够很轻易的快速的完成,我们想要的动画结果,而省去了操纵js的贫苦。同时呢,它也是一个开源的库,在GitHub的点赞高达5万以上。功用异常壮大。机能也充足精彩。
怎样运用它?
- 起首你须要到github上下载它,
- 拿到它以后,把animate.css引入到你的html文件。
- 参考官方的文档(固然了,是英文的哈哈哈,程序员不会英语可万万不行的哦。)就可以够非常轻易的运用它了。
- 注重哈,内联元素比方a标签有些动画是不支持的。如今该库正在一点一点的更新中。
- 例子
(一)静态的运用它
<!-- animated是必需增加的;bounce是动画结果;infinite从语义来看也秒懂,无穷轮回,不增加infinite默许播放一次 -->
运用的基础公式就是:
<div class="animated 想要的动画称号 轮回的次数 耽误的时候 延续的时候">动画</div>
<div class="animated bounce infinite delay-2s duration-2s ">动画</div>
(二)动态的运用它
// 重要的思绪就是:给动画对象增加类,然后监听动画完毕事宜,一旦监听到动画完毕,马上移除前面增加的类。----假如你如今还不会运用js基础语法以及jQuery,那末确切比较难邃晓
// 以下是官方给出的jQuery封装
//扩大$对象,增加要领
animateCss $.fn.extend({
animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName);
});
}
// 以下是一个小demo
//animate("选择器","动画","次数","时延")
function animate(seletor, animation_name, count, delay) {
var target = document.querySelectorAll(seletor)
var timer = null;
timer = setInterval( function() { target.forEach( function(x) { x.className += " animated " + animation_name;
x.addEventListener("animationend", function(){
x.className = x.className.replace(" animated " + animation_name, "");});
} )
count --;
if( count <= 0 ) {
clearInterval( timer );
}
}, delay)
} //运用示例 animate('.haha', "bounce", 2, 1000);
// 经由过程这个例子你就可以邃晓怎样动态的运用它了,这个小demo只完成了对animationend的监听。
- 假如你想更简朴的运用js,请看以下代码.注重以下操纵均用到了jQuery
// 1.假如说想给某个元素动态增加动画款式,能够经由过程jquery来完成:
$('#yourElement').addClass('animated bounceOutLeft');
// 2.当动画结果实行完成后还能够经由过程以下代码增加事宜
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
// 3.你也能够经由过程 JavaScript 或 jQuery 给元素增加这些 class,比方:
$(function(){
$('#yourElement').addClass('animated bounce');
});
// 4.有些动画结果最后会让元素不可见,比方淡出、向左滑动等等,大概你又须要将 class 删除,比方:
$(function(){
$('#yourElement').addClass('animated bounce');
setTimeout(function(){
$('#yourElement').removeClass('bounce');
}, 1000);
});
- 以上的js代码不会?没紧要我们另有别的方法,完成一样的结果
/* 我们能够经由过程本身重写源代码内里的属性,从而掩盖源代码,让动画完成我们想要的结果,假如这个你还不会?ok那你照样好好把前面的html啊,css啊挪动端的规划啊,好好的复习复习*/
#yourElement {
-vendor-animation-duration: 3s; //设置-vendor-animation-delay: 2s; //设置耽误的时候-vendor-animation-iteration-count: infinite; //
}
/* 关于时候的申明,animated中定义了几个类。在官方的文档中也给出了,默许的是delay-1s,duration也是1s
slow 2s
slower 3s
fast 800ms
faster 500ms */
- 还须要申明的就是在你的项目中运用它,须要注重的处所,假如你还未控制服务器端的手艺,这点你能够疏忽
animate供应了npm以及yarn的下载安装体式格局,你能够运用npm 或许yarn来下载而且运用它。怎样你能够经由过程设置配置文件(animate-config.json)来拔取你须要的功用模块。比如,我不须要flash和shake结果,只要在配置文件中,设置为false既可。
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}
理会源码
这里最重要的是就是三个症结类,
- animated类
- 以下是animated类的部份源码
+++
.animated.flip {
-webkit-backface-visibility: visible;
/* 指定元素反面面向用户时是不是可见。 */
backface-visibility: visible;
-webkit-animation-name: flip;
/* 检索或设置对象所运用的动画称号,必需与划定规矩@keyframes合营运用,由于动画称号由@keyframes定义 */
animation-name: flip;
}
+++
.animated {
/* 兼容性写法,duration设置的是延续的时候 */
-webkit-animation-duration: 1s;
animation-duration: 1s;
/* 检索或设置对象动画时候以外的状况 both选项就是设置对象状况为动画完毕或入手下手的状况 */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
/* 指定动画轮回能够是无穷的(infinite也能够指定详细的轮回次数比方9) */
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
/* 设置耽误的时候 */
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
/* 以下的四个是我们之前说的animate中自定义的时候辞汇 */
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
/* 这个是媒体查询相干的 */
/* prefers-reduced-motion 用于检测用户的体系是不是被开启了动画削弱功用。
reduce
这个值意味着用户修改了体系设置,将动画结果最小化,最好一切的不必要的挪动都能被移除。
*/
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
- infinite类
- 这个的源码就在上面了
.animated.infinite {
-webkit-animation-iteration-count: infinite;
/* 指定动画轮回能够是无穷的(infinite也能够指定详细的轮回次数比方9) */
animation-iteration-count: infinite;
}
- 动画名类,比方bounce
- 以下是定义详细的动画代码,
注重,嵬峨上的bezier曲线。这个timing-function是一个检索或设置对象动画的过渡范例的东西,cubic-bezier是贝塞尔曲线,取值在[0,1]之间,须要指定四个值,那末什么是贝塞尔曲线呢?哈哈哈假如你高数没白学,那你应该能邃晓这个的事情道理,假如你还不是很清晰,请点击这里
@keyframes bounce {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
- 你能够看得到,这些代码,在项目文件夹构造中,animate把source(意为“源”)内里的详细完成代码合并到一个css文件中(animate.css),在source文件夹下,这些详细的动画结果被做了详细的分类与归档。
后续给人人带来一个越发越发有用的css库,(Hover.css)运用以及源码理会,敬请期待
ElasticSearch系列四 CURD