AniJS 漂亮的 CSS 动画处理插件 - 文章教程

AniJS 漂亮的 CSS 动画处理插件

发布于 2019-03-21 字数 4508 浏览 3177 评论 0

AniJS 是一个 CSS 动画的声明处理库,它能够使开发更便利且能提高开发速度,它文档完善且易于上手,不需要你有编程的基础技术就可以使用这个插件,而且免费开源,轻量级的CSS3动画插件,值得一用。

AniJS 漂亮的 CSS 动画处理插件

AniJS 定义了多种动画模式,比如 UI 元素抖动、界面翻转、元素的倾斜等,其核心的方法就是在元素的某个事件上添加或者删除某个 CSS 样式,达到预制的动画效果,官方也给出了很多个示例,点击这里查看更多。

特点

AniJS 是一个非常不错的网页特效设计解决方案,他具有以下的特点:

  • Easy to use.
  • Compact – around 7.7kb after gzipping.
  • There is no need for third party libraries.
  • Speed of development.
  • Better integration between coders and designers.

安装方法

QuickStart Template Fork on GitHub     Download as ZIP Demo

Contributing

AniJS is like a little girl, she needs hungry and foolish community people to grow up healthy. All your issues, pull requests and stars 😉 are welcome.

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

使用方法

1、引入 AniJS 插件文件。

<script src="anijs-min.js"></script>

2、引入一些 CSS animation definitions

<head>
    <!-- AniCollection.css library -->
    <link rel="stylesheet" target="_blank" class="external-link" href="http://anijs.github.io/lib/anicollection/anicollection.css">
</head>

3、开始动画需要给对应 HTML 代码添加自定义属性 data-anijs

<body>
    <header data-anijs="if: click, do: flipInY animated">
        header
    </header>
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
        nav
    </nav>
    <div id="main" data-anijs="if: mouseover, on: body, do: swing animated">
        if: load, on: window, do: swing animated
    </div>
    <footer>
        footer
    </footer>
    <script src="anijs-min.js"></script>
</body>

See a Codepen Example

在线示例

TabBar | Accordion | Modal | Menu | Notification App | |ScrollReveal | RequireJS and Total.js(NodeJs web framework) | Custom Events Listening. | JQuery Events System

Github地址:https://github.com/anijs/anijs/

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

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

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

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论