simplean.js v0.1.1

Simplean.js 0.1.1

Contents

• Overview
• Quick start
• API
  • Simplean#to
  • Simplean#addClass
  • Simplean#removeClass
• jQuery or Zepto
• Compatibility
• BUG
• Changelog
• LICENSE

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