什么是npm包ember-stagger-swagger
npm包ember-stagger-swagger是一个用于 Ember 应用程序的动画库，主要用于快速地创建复杂而且高度定制化的过渡动画效果。此库基于ember-stagger扩展实现，使用了一种基于 promise、互相依赖的机制，用于管理不同元素的过渡动画效果。
安装npm包ember-stagger-swagger
使用npm进行全局安装：npm install ember-stagger-swagger --save
在你的项目应用根目录中，使用以下代码导入动画库：
import StaggerSwagger from 'ember-stagger-swagger';
使用npm包ember-stagger-swagger
npm包ember-stagger-swagger的使用方式，大体上与ember-stagger类似。主要分为两种使用场景：
- 用于列表动画过渡:
{{#each lists as |item index|}}{{#stagger-swagger}}{{item}}{{/stagger-swagger}}{{/each}} - 用于渲染组件的过渡动画:
{{#stagger-swagger}}{{my-component}}{{/stagger-swagger}}
以下是使用列表动画过渡的示例代码：
{{#each lists as |item index|}}
{{#stagger-swagger delay=(hash from=0 to=200 index=index) offset=100 direction='y'}}
<div class="my-list-item">{{item}}</div>
{{/stagger-swagger}}
{{/each}}以上示例代码中，delay属性用来指定动画延时，offset属性用来指定动画间隔时间，direction属性用来指定动画方向。
以下是使用渲染组件的过渡动画的示例代码：
{{#stagger-swagger delay=(hash from=0 to=200) offset=100 direction='y'}}
{{my-component}}
{{/stagger-swagger}}高级使用
npm包ember-stagger-swagger支持运用 promise 机制，用于实现复杂的过渡动画，再加上 Ember 的辅助函数，可以实现非常复杂的动画。
以下是示例代码：
-- -------------------- ---- -------
------ - ------- - ---- -------
------ - -------- ---- - ---- -----------------
------ ------- -----------------------
----------------- --------------- -- -
------------------------------ -- -
-------------------- ------------------- ---- ----- ---
--------------- -
-------- --- ---
---------- -- ------ - -- - ------ - --
-- - --------- ---- ---
---
--
------------------ --------------- -- -
----- -------------------------------------- -- -
-------------------- ------------------- ---- ----- ---
------ --------------- -
----------- ----- ---
-------- --- ---
---------- -- ------ - -- - ------ - --
-- - --------- ----- ------- ------------- ---
----
--
----------------- -------------- -- -
----- ------------------------------------- -- -
-------------
------ --------------- -
----------- --- -----
-------- --
---------- -- ------ - -- - ------ - --
-- - --------- ---- ------- ------------- ---
----
-
---结语
npm包ember-stagger-swagger是一个用于 Ember 应用程序的动画库，它提供了方便易用的 API，以及支持 promise 机制，使得用户可以很方便地实现复杂的动画效果。通过本文的学习，你将会学到如何安装和使用此库，以及如何在 Ember 应用程序中实现更复杂的过渡动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca07