iconate.js 跨浏览器的图标动态化的高性能的库 - 文章教程

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

发布于 2020-07-28 字数 2905 浏览 1333 评论 0

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

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0