iconate.js 跨浏览器的图标动态化的高性能的库

Question

iconate.js 是一款能跨浏览器的图标动态化的高性能的库。

安装

• NPM: npm install iconate
• Bower: bower install iconate
• Download zip.

Note: iconate.js 也支持AMD和commonJS模块模式。

使用方法

在 html 中包含样式表和 Javascript 文件。

<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">

创建图标元素。

<i id="icon" class="fa fa-bars fa-lg"></i>

动画图标从 fa-bar 到 fa-arrow-right 通过 rubberBand 动画效果。

var iconElement = document.getElementById('icon');
var options = {
    from: 'fa-bars',
    to: 'fa-arrow-right',
    animation: 'rubberBand'
};

iconate(iconElement, options);

动画类型

以下 AnimationTypes 可以在 iconate 调用中使用。

• rollOutRight
• rollOutLeft
• rubberBand
• zoomOut
• zoomIn
• fadeOut
• fadeOutRight
• fadeOutLeft
• fadeOutTop
• fadeOutBottom
• horizontalFlip
• verticalFlip
• bounceOutBottom
• bounceOutTop
• bounceOutLeft
• bounceOutRight
• rotateClockwise
• rotateAntiClockwise
• tada

API 方法

iconate(element, [, options] [, callback] )

设置图标元素的动画。

• element - Icon Element to perform operations on.
• options - Object containing options to control the animation.
  • from - Current icon class name (ex. 'fa-bars' in case of font-awesome)
  • to - Final icon class name (ex. 'fa-arrow-right')
  • animation - You can choose any animation from above listed animation types. (ex. 'fadeOutRight')(default: 'zoomOut')
• callback - Optional callback to execute after animation completes.

相关链接

• 在线示例：http://bitshadow.github.io/iconate/