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地址

本文转载于:猿2048anijs 一个小巧的动画库