Skip to content

Latest commit

 

History

History
132 lines (108 loc) · 3.1 KB

README.en-us.md

File metadata and controls

132 lines (108 loc) · 3.1 KB
Raw

Simplean.js 0.1.1

Build pass npm GitHub license

Contents

Overview

  • Focus on mobile browser and advanced browser
  • Focus on dom animation
  • Only provide three api: to, addClass, removeClass

Quick start

  1. 下载simplean.js文件到项目中

  2. 页面中引入simplean.js脚本

    <script type="text/javascript" src="***/simplean.js"></script>

  3. 初始化Simplean实例

    var dom = document.querySelector('div.animation');
var sp = Simplean(dom);

  4. 配置你想要的动画效果

 sp.to({
   width: '200px',
   height: '200px',
   border-radius: '50px'
 });

API

Simplean#to(styles[, options])

    Simplean(dom).to({
        width: 200px;
        background-color: red;
    });

    Simplean(dom).to({
        height: 200px;
        border-radius: 50px;
    }, {
        ease: 'ease-out'
    });

Simplean#addClass(classNames[, options])

    .highlight {
        color: red;
        background: blue;
    }

    Simplean(dom).addClass('highlight', {
        ease: 'ease-in-out',
        onStart: function () {
            console.log('I will be highlight');
        },
        onStop: function () {
            console.log('I\'m be highlight');
        }
    });

Simplean#removeClass(classNames[, options])

    .rotate-30 {
        transform: rotate(30deg)
    }

    Simplean(dom).removeClass('rotate-30', {
        ease: 'ease-in',
    });

jQuery or Zepto

如果你的项目中有jQuery或者Zepto，Simplean会自动提供相应插件，插件注册anTo、anAddClass、anRemoveClass三个API，分别与to、addClass、removeClass相对应，简单示例:

    .rotate-30 {
        transform: rotate(30deg)
    }

    $(dom).anRemoveClass('rotate-30', {
        ease: 'ease-in',
    });

如果$(dom)是一个列表，那么会遍历列表中所有元素来调用相应API。

Compatibility

Support IOS6.0+、Android4.0+。

BUG

Post a issue and we will deal with immediately.

Changelog

show detail

LICENSE

MIT