npm 包 superfly-css-utilities-effects 使用教程

superfly-css-utilities-effects 是一个方便实现 CSS 动画效果的 npm 包，可以简化前端开发对于动画活动的代码书写。在本篇文章中，我们将会深入了解这个包的一些用法和技巧，为你的前端开发工作提供有益的指导。

安装

我们可以通过 npm 安装 superfly-css-utilities-effects，方法如下：

npm install superfly-css-utilities-effects --save

安装完成后，我们就可以开始使用这个工具包了。

基础用法

superfly-css-utilities-effects 提供了多个用于实现动画效果的 utility classes。我们可以通过在 HTML 标签上添加这些 class 实现动画效果。示例代码如下：

<div class="animated infinite bounce">
  <img src="http://example.com/yourimage.png" alt="Your Image" />
</div>

上面的代码可以让图片在无限次弹跳。其中，我们使用了两个 superfly-css-utilities-effects 提供的 class，分别是 animated 和 bounce。这两个 class 可以组合使用，分别代表着元素开启动画和实现弹跳效果。

深入用法

superfly-css-utilities-effects 提供的动画效果并不仅限于 bounce 这一个，还有多种不同的动画效果可供选择。在本小节中，我们将介绍几个常用的动画效果，并展示它们的使用方法。

1. flip

flip 可以实现一个元素的翻转效果。代码如下：

<div class="animated flip">
  <img src="http://example.com/yourimage.png" alt="Your Image" />
</div>

1. bounceIn

bounceIn 可以让一个元素在进入页面时实现弹跳效果。代码如下：

<div class="animated bounceIn">
  <img src="http://example.com/yourimage.png" alt="Your Image" />
</div>

1. bounceOut

bounceOut 可以让一个元素在退出页面时实现弹跳效果。代码如下：

<div class="animated bounceOut">
  <img src="http://example.com/yourimage.png" alt="Your Image" />
</div>

自定义动画效果

如果 superfly-css-utilities-effects 提供的默认动画效果无法满足你的需求，你可以自定义一个动画效果。代码如下：

-- -------------------- ---- -------
---------- -------------- -
  ---- -
    -------- --
  -

  -- -
    -------- --
  -
-

----------------- -
  --------------- ---------------
  ------------------- ---
-

上面的代码定义了一个名为 myCustomEffect 的动画效果，实现的功能是当元素出现时逐渐变得不透明。通过添加 .my-custom-effect class，我们可以将这个动画效果应用在任何元素上。

总结

superfly-css-utilities-effects 提供了多种方便实现 CSS 动画效果的 utility classes，使用起来非常简单。如果你需要自定义动画效果，也可以通过 CSS 的 keyframes 功能实现。在前端开发过程中，使用这个 npm 包，可以大大提高我们的效率和代码可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570d81e8991b448d3f7a