Simplean.js 0.1.1

目录

• 简介
• 快速开始
• API
  • Simplean#to
  • Simplean#addClass
  • Simplean#removeClass
• jQuery or Zepto
• 兼容性
• BUG
• Changelog
• LICENSE

简介

• 专注于移动端与高级浏览器
• 专注于DOM动画
• 专注于简单的特性，只提供三个API：to、addClass、removeClass

快速开始

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。

兼容性

支持IOS6.0+、Android4.0+。

BUG

发一个issue，我们会快速响应。

Changelog

详情

LICENSE

MIT