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