转载

anijs 一个小巧的动画库

很多时候我意识到前端已近变成写h5宣传页面我不知道是可悲还是生活的必然

小问题

使用css animation和js animation api制作动画是目前比较流行的做法

但是最后很多人的代码就变成这样

<div class="element-box" element-anim=""      style="top: 101px; left: 41px; z-index: 1; width: 100%; height: 100%; opacity: 1; color: rgb(103, 103, 103); border: 13px double rgb(255, 255, 255); padding-bottom: 0px; padding-top: 0px; line-height: 1; border-radius: 0px; transform: none; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; animation: zoomIn 1s ease 0s 1 both;">     <div class="element-box-contents" style="width: 100%; height: 100%;">         <img id="6703306088" ctype="4" class="element comp_image editable-image" src="http://res.eqxiu.com/group3/M00/CC/3D/yq0KZFXWt6qAP9_kAAGjsK_txHk736.png" style="width: 217px; height: 328px; margin-top: -44.5px; margin-left: 0px;">     </div> </div>

估计这些都是js生成的那么我有个疑问还要css 干什么这些工具生成的代码最后怎么手动开发

我的小想法

申明式编程

无论是手动还是工具生成的代码都使用同一套库

    <div your-directive="sentence;"></div>

于是我找到了一个库 anijs 该库压缩后大小为10kb左右

anijs 是一个js动画框架实现了类似于我的想法

github地址

<div data-anijs="if: click, do: $toggleClass red, to: .box">If you click me, </div>

一个开发人员只要知道什么时候做什么 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

 <div class="ani-list">  <div class="ani-list__item item1" data-anijs="if: touchstart, on: #main, do: fadeInRight animated;"></div>  <div class="ani-list__item item2" data-anijs="if: animationstart, on: .item1, do: fadeInRight animated;"></div>  <div class="ani-list__item item3" data-anijs="if: animationstart, on: .item2, do: fadeInRight animated;"></div>  <div class="ani-list__item item4" data-anijs="if: animationstart, on: .item3, do: fadeInRight animated;"></div>  <div class="ani-list__item item5" data-anijs="if: animationstart, on: .item4, do: fadeInRight animated;"></div>  <div class="ani-list__item item6" data-anijs="if: animationstart, on: .item5, do: fadeInRight animated;"></div>  <div class="ani-list__item item7" data-anijs="if: animationstart, on: .item6, do: fadeInRight animated;"></div>  <div class="ani-list__item item8" data-anijs="if: animationstart, on: .item7, do: fadeInRight animated;"></div>  <div class="ani-list__item item9" data-anijs="if: animationstart, on: .item8, do: fadeInRight animated;"></div>  <div class="ani-list__item item10" data-anijs="if: animationstart, on: .item9, do: fadeInRight animated;"></div> </div>

简简单单不用写什么代码

如果有用一些框架

完全可以封装成如下

 <ani-list>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item>  <list-item></list-item> <ani-list>

如果你想看代码

github地址

正文到此结束