npm 包 ngxani 使用教程

阅读时长 6 分钟读完

在前端开发中,动画效果往往可以使界面更生动,吸引用户的注意力。但要开发出高质量的动画效果并不容易,特别是对于没有专业设计背景的开发者来说。

这时候,我们可以选择使用 ngxani 作为我们的动画库。Ngxani 是一个基于 Angular 平台的动画库,提供了丰富的动画效果。本文将详细介绍如何在项目中使用 ngxani。

安装

首先,在项目中安装 ngxani:

导入

在需要使用的组件中导入 ngxani:

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

-----------
  -- ---
  -------- -
    -- ---
    -------------
  --
  -- ---
--
------ ----- --------- - -
展开代码

使用

在组件中,添加 ngxAni 指令即可使用动画效果。例如,我们可以为一个按钮添加一个缩放动画:

同时,我们也可以通过以下两种方式来使用 ngxani 提供的其他动画效果:

  1. 在标签上添加 ngxAni 属性,值为动画名称;
  2. 通过 ngxani 组件实现动画效果。

例如,我们可以在一个 div 上添加一个跳跃动画:

或者,我们可以通过组件来实现跳跃动画:

设置

ngxani 提供了很多可配置的属性,以满足不同的需求。

时间

我们可以通过 ngxAniTime 属性来设置动画的时间:

延迟

我们可以通过 ngxAniDelay 属性来设置动画的延迟时间:

重复次数

我们可以通过 ngxAniRepeat 属性来设置动画的重复次数:

方向

我们可以通过 ngxAniDirection 属性来设置动画的方向:

回弹

我们可以通过 ngxAniEase 属性来设置动画的回弹效果:

效果

ngxAniEase 属性提供以下几种回弹效果:

  • ease-in
  • ease-out
  • ease-in-out
  • bounce
  • back

自定义

如果以上属性无法满足需求,我们也可以使用 ngxAniStyle 属性自定义动画效果:

复合属性

以上属性可以组合使用,例如:

示例

下面是一个使用 ngxani 实现的动态加载页面的示例:

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

---- ---------------
  ------- --------------------------
    -------------
    -------------
    -------------
    -------------
  ---------
------
展开代码
-- -------------------- ---- -------
---- -
  -------- ------
  ------- -----
  -------- ---- -----
  ------- -----
  -------------- -----
  ----------------- --------
  ------ -----
  ---------- -----
  ------- --------
  ----------- --- ---- ---------
-

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

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

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

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

----- -
  -------- -----
-
展开代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- ---------

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

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

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

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

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

-
展开代码

总之,ngxani 是一个方便易用的 Angular 动画库,通过本文所介绍的方法,你可以从它提供的丰富动画效果中选出你需要的动画效果,并实现在你的项目中。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005597f81e8991b448d70eb

纠错
反馈

纠错反馈