了解Divi 5中触发器，效果和目标之间的差异

Divi 5的新互动使用一个简单的模型 - 触发，效果，目标。分开开始它，发生的事情以及什么变化，您可以在布局中创建清晰的，协调的运动。在这篇文章中，我们将解释每个部分，展示它们如何结合在一起，然后浏览一个可以重复使用的快速示例。让我们开始！

什么是触发因素，效果和目标？

Divi 5中的相互作用是由三个一起工作的运动部件构建的。触发器设置了运动中的事物，效果决定了响应的外观，目标定义了哪些元素变化。

订阅我们的YouTube频道

设置互动时，Divi会要求您填写所有三个部分：

单独了解每个角色将使它们更容易看到它们如何连接到一个完整的系统。

触发是开始的

每个互动都以称为触发的起始动作开始。这是用户采取的第一步，例如鼠标单击，悬停或页面加载，它可以启动操作。例如，将鼠标移到定价卡上，将链条置于运动中。

触发器本身无济于事。它需要回应。

效果是发生的

一旦扳机发射，效果就会随之而来。在这里，您可以决定反应，例如倾斜，褪色，比例，模糊或任何运动混合。图片略微缩放同一定价卡，并在光标徘徊时添加更深的阴影 - 这就是效果。

最后，您需要决定在哪里应用效果。

目标是改变

目标只是触发触发时会更改的元素。悬停是一种常用的交互作用，但仅影响元素本身。换句话说，启动交互的元素（触发器）也是更改（目标）的元素。

例如，悬停在列上可以制作相同的列秤，因为它也是目标。

这使一切都局限于一个元素。您仍然可以在Divi 5中以这种方式进行设置，但是您不再限于它。

现在，触发器和目标可能会有所不同，这为您提供了更多的控制。例如，当光标进入部分时，即使没有触摸，按钮也会缩放。在这种情况下，按钮是目标。

他们如何一起工作

既然我们已经看到了每个部分，那么当您将它们连接到链条中时，真正的力量就会出现：

• 触发火灾：访问者做一些事情，例如单击，移动鼠标，输入，离开或加载页面。
• 效果定义：您决定显示哪种视觉或运动响应。
• 目标适用：该更改土地在您选择的元素上。

想想它像接线电路。开关翻转，电流流动，灯泡亮起。

在Divi 5中，您可以以任何喜欢的方式接线该电路。圆柱上的悬停可以倾斜其按钮。页面负载可以在英雄图像中消失。单击可以同时对几个模块进行动画，从而使该部分感到协调。

这是当互动停止感觉像是一个更好的悬停并开始像设计语言一样开始工作的时候。您不再坚持一个元素对自己的反应。您可以链，交错并传播响应以连接整个布局。

了解有关Divi 5互动的所有内容

Divi 5中的公式

Divi 5的互动的美丽在于它们不是随机的附加组件。他们遵循清晰的公式：触发→效果→目标。一旦将其视为可重复的模式，建立复杂的互动就会变得简单且一致。

让我们将这个公式付诸实践，向您展示它们如何一起工作。在此示例中，让我们创建一个联系表格，当用户单击按钮时，该表格会在屏幕上弹出。

为了创建此效果，您将在要用作触发器的按钮上设置一个交互。选择以下设置：

• 触发事件：单击（我们已经决定，当用户单击按钮时，该事件将触发）
• 效果行动：显示元素（隐藏的触点表格）
• 目标模块：（联系人）是分配给联系部分的标签。

接下来，设置锚点链接以打开联系部分。首先，打开“联系表”的部分设置，然后转到“高级”选项卡。在CSS ID和类中，设置CSS ID ：联系人。

然后，转到按钮的设置，然后在按钮链接URL字段中输入#Contact。

最后，将表单的初始状态设置为“隐藏”，以便仅在触发时才会出现。打开“联系表”的部分设置，转到“高级”选项卡，然后在Visib itility下选择要隐藏的断点。

现在测试它。单击按钮，然后出现隐藏的联系部分。

简单的流（单击→显示→触点表格）与您重复使用弹出窗口，切换，轻柔的启示或横跨部分的动画相同。一旦您在触发，效果和目标方面思考，可能性就会迅速开放。

今天尝试在Divi 5中进行互动

你有模式。现在将其在真实页面上工作。打开测试布局并建立一个小型互动效果，您可以在十分钟内完成。选择您在客户端网站上实际使用的内容。

这里有一些迷你提示来滚动：

• 鼠标进入部分，使其按钮刻度巧妙
• 单击“联系”按钮揭示了藏匿的表格
• 鼠标留在卡上倾斜
• 页面负载在英雄图像中逐渐消失，然后稍后标题

在评论中让我们知道您是否使用了Divi 5的互动功能，以及您对此的看法！