Ember-interactivity 是一个为 Ember.js 开发人员提供的交互性工具，它可以使开发人员更轻松地为 Ember.js 应用程序添加交互组件和动画效果。
在本篇文章中，我们将介绍如何使用 npm 包 ember-interactivity。
安装
我们可以使用 npm 包管理器来安装 ember-interactivity，在终端中输入以下命令：
npm install ember-interactivity --save
使用
我们将通过一个可交互的按钮的示例来演示如何使用 ember-interactivity。
首先，在组件中引入 ember-interactivity：
import InteractivityMixin from 'ember-interactivity/mixins/interactivity';
然后，在组件的 JavaScript 文件中，我们将添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -------------------------------------------
------ ------- ------------------------------------------ -
-------------- -----------------------
------- -
---------------------------------------------------
--
---在代码中，我们使用mixins将ember-interactivity的代码混入到了组件中，实现了在组件中使用这个插件，同时我们也注入了interactivity服务，以便在我们的按钮被单击时发送 'buttonClicked' 事件。
在模板文件中添加以下代码：
<button {{action "click"}}>Click me!</button>这里我们绑定了组件中定义的 click() 方法，当按钮被单击时，代码中的 click() 方法将被调用，并发送 'buttonClicked' 事件给interactivity服务。
现在，让我们来给拥有类名为 "button" 的按钮添加浮动效果。在组件的 CSS 中，我们可以添加以下代码来实现：
.button {
transition: transform 0.5s ease-in-out;
}
.button.interactive:hover {
transform: scale(1.1);
}这段代码将按钮的缩放比例从 1 缩放到 1.1，从而实现了一个简单的浮动效果。
最后，在我们的模板文件中，我们需要定义该组件的交互性。我们调用相应的函数，为 'buttonClicked' 事件添加动画效果：
{{#interactive-area target="button" on=(hash buttonClicked="animateButton")}}
{{my-button}}
{{/interactive-area}}上述代码中，我们使用了交互区域组件（interactive-area component）将按钮包裹起来，以便为按钮添加交互性。交互区域组件将按钮作为目标（target），并为 'buttonClicked' 事件将调用名为 'animateButton' 的函数。
现在你已经知道了如何使用 ember-interactivity 来创建可交互的组件，下面是完整的示例代码：
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ ------------------ ---- -------------------------------------------
------ ------- ------------------------------------------ -
-------------- -----------------------
------- -
---------------------------------------------------
--
---
-- -------------
------- -
----------- --------- ---- ------------
-
------------------------- -
---------- -----------
-
-- ---------------
------------------- --------------- -------- --------------------------------
-------------
---------------------总结
本文介绍了使用 npm 包 ember-interactivity 的方法，通过一个交互式按钮的示例，演示了如何将交互性功能添加到 Ember.js 应用程序中。
在创建交互组件时，我们需要将 ember-interactivity 的 mixin 混入到组件中，并在模板文件中为交互性添加相应的组件。
本文代码属于简单示例，但你可以自行将其扩展，以创建更复杂的交互性组件。通过掌握这些技能，你可以为你的 Ember.js 应用程序添加更多的动态效果，并为用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb42