0

iconate

Transform your icons with trendy animations.

官方網站
Github 資源庫
主要指標

Github星跟蹤圖

iconate.js

A call to transform your existing icons in a cool trendy way

iconate.js is a tiny performant library for cross-browser icon transformation animations in your projects.

Demo

Installation

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

Note: iconate.js also supports AMD and commonJS module pattern.

Basic Usage

  1. Include the Stylesheet and Javascript files in your html.

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

  2. Create icon element.

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

  3. Animate icon from fa-bar to fa-arrow-right with rubberBand animation.

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

iconate(iconElement, options);

  4. Following AnimationTypes can be used in iconate call.

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

Public API

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

Animate an icon element.

  • 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.

Browser Support

Chrome, Firefox, IE, Opera, Safari, ---, ---, ---, ---, ---, 4+ ✔, 16+ ✔, 10+ ✔, 15+ ✔, 6+ ✔, License

Copyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io
Licensed under the MIT license.

主要指標

概覽
名稱與所有者AlexanderPoellmann/PaymentFont
主編程語言CSS
編程語言JavaScript (語言數: 1)
平台
許可證MIT License
所有者活动
創建於2014-09-21 22:41:24
推送於2017-12-21 11:26:03
最后一次提交2017-12-21 12:26:02
發布數10
最新版本名稱1.2.5 (發布於 )
第一版名稱v1.0.0 (發布於 )
用户参与
星數1.6k
關注者數33
派生數125
提交數79
已啟用問題?
問題數167
打開的問題數100
拉請求數4
打開的拉請求數0
關閉的拉請求數4
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?