anijs一个玲珑的动画库

许多时刻我意想到前端已近变成写h5宣扬页面 我不晓得是可悲 照样生涯的必定

小问题

运用css animation和js animation api制造动画是现在比较盛行的做法

然则末了许多人的代码就变成如许

>

预计这些都是js天生的 那末我有个疑问 还要css 干什么
这些东西天生的代码末了怎样手动开辟

我的小主意

说明式编程

不管是手动 照样东西天生的代码都运用统一套库

因而我找到了一个库 anijs 该库紧缩后大小为10kb摆布

anijs 是一个js动画框架 完成了相似于我的主意

github地点

一个开辟人员只需晓得什么时刻 做什么 ok 不管编辑器 照样手写都是一个语法 中心库还能够分拆保护

anijs 语法

data-anijs -> Sentence 1; ... ; Sentence n
Sentence -> Definition, ... , Definition n
Definition -> if | on | do | to | before | after | helper

有些小例子

比如说我想做个listbox 一个一个接着挪动进入场景

这时刻我们能够运用animate.css anicollection.css 或许本身写个animation

your style css

@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
} .fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

html

简简单单 不必写什么代码

假如有效一些框架

完全能够封装成以下

假如你想看代码
github地点