开发定制手风琴

制作个性化手风琴需要利用下拉元素和交互。本教程将涵盖：

1. 如何插入下拉元素
2. 如何自定义下拉开关
3. 如何设计你的手风琴
4. 如何制作定制动画

如何添加下拉元素

这 落下 元素包含默认的内置函数，可简化其作为个性化手风琴的使用——它揭示了 下拉列表 单击时显示，单击页面的特定元素或部分时隐藏。 

您可以通过导航到以下位置将下拉元素集成到您的网站中 添加面板 （一）> 元素 > 先进的 并拖动 落下 元素拖到画布上。 

如何修改默认下拉样式

要将下拉菜单纳入您的个性化手风琴面板，您必须调整默认的下拉菜单元素样式。特别是，您应该修改宽度以确保下拉菜单占据其父元素（即包含自定义手风琴面板的元素）的整个空间。 

额外提示： 分配一个 班级 添加到下拉菜单（例如“折叠项”）中，以实现样式的可重复使用性。探索有关使用类进行样式设置的更多信息。

要调整默认下拉样式： 

1. 选择父母 落下 设计器画布上的元素（在本例中，我们将其指定为“手风琴项目”类）
2. 访问 样式面板 > 尺寸
3. 指定 宽度 作为 100%

如何个性化你的下拉开关

此时，你需要个性化你的 下拉开关 因此，当折叠面板关闭时，它会完全填充其父元素（即容器），并隐藏下拉列表中的内容。要实现这一点，请调整下拉开关的 展示 和 高度 特性：

1. 选择 下拉开关 在画布上并分配一个类（例如，“手风琴切换”）
2. 导航 样式面板 > 布局
3. 放 展示 到 弹性盒子 实现完全水平覆盖
4. 放 对齐 到 中心 用于在折叠面板上居中的垂直文本
5. 继续 样式面板 > 尺寸
6. 定义一个 高度 值（例如 80px）

如何设计你的手风琴

在此阶段之后，如果您测试您的网站并与手风琴面板交互，您可能会发现手风琴面板展开了，但其中的默认内容可能会与周围内容重叠。发生这种情况的原因是默认 位置 下拉列表的样式是 绝对。虽然这是菜单或导航栏等传统下拉菜单使用所需的行为，但对于您的个性化手风琴面板，您必须更改默认定位，以便当手风琴面板内的内容扩展时，附近的内容会进行调整（例如，向下或向上移动）。 

革新你的手风琴： 

1. 选择父母 落下 画布上的元素（例如“Accordion item”） 
2. 选择“齿轮”图标揭开 下拉设置 并点击“展示”毗邻 导航
3. 选择 列表框 画板上的选项
4. 导航 设计面板 > 结盟
5. 调整 结盟 到 固定的
6. 在画板上选择祖先下拉元素（例如“手风琴项目”）
7. 去 设计面板 > 方面
8. 放 面具 到 暗 遮盖超出折叠区域的任何内容

设计个性化动画的步骤

现在，创建一个独特的动画，该动画将按照以下步骤处理自定义手风琴的打开和关闭： 

1. 建立初步行动
2. 为折叠面板的展开添加动画效果
3. 为折叠面板添加动画效果

建立初步行动

通过为您的手风琴制作 2 个初始动作（即，在页面加载之前应用于元素的样式）来启动。

首先，为下拉菜单启动一个初始操作： 

1. 选择 落下 画板上的元素（例如“手风琴项目”）
2. 导航 交互面板 > 元素触发器 并点击“加”符号来创建一个新的元素触发器
3. 选择 下拉菜单展开
4. 轻敲 选择操作 在下面 菜单显示
5. 选择 启动动画 在下面 个性化动画
6. 点击“加”符号旁边 预定动画
7. 为自定义动画指定一个名称（例如“手风琴展开”）
8. 点击“加”符号旁边 活动 将动作合并到动画中
9. 选择 震级 在下面 各种各样的
10. 标记“设置为初始状态” checkbox 下 定时
11. 进入一个 高度 值（例如，80px） 震级 与您的身高一致 落下转变 （例如，前面步骤中的“折叠开关”）
12. 轻敲 节省

接下来，启动开关图标的初始操作： 

1. 选择 象征 下拉元素内部
2. 前往 设计面板 并标记你的图标类别（例如，“折叠图标”）——现在你的动画可以影响图标的所有实例
3. 选择您的祖先 落下 画板上的元素（例如“手风琴项目”）
4. 展开 交互面板 
5. 选择 下拉菜单展开 你在前面的步骤中创建的交互
6. 点击“齿轮”符号位于您之前制作的自定义定时动画旁边（例如，“手风琴展开”交互）
7. 选择 图标 （例如，“手风琴图标”）
8. 点击“加”符号旁边 活动 为图标设置初始操作 
9. 选择 旋转 在下面 改变 
10. 标记“设置为初始状态” checkbox 下 定时 
11. 前往 旋转 并拨打 z 轴 到 0度
12. 轻敲 节省

为折叠面板的展开添加动画效果

接下来，设置在点击手风琴折叠面板时同时发生的扩展手风琴折叠面板的操作 —— “手风琴折叠面板项目”的大小将根据其中的内容大小进行调整，并且“手风琴折叠面板图标”将旋转 180 度。 

要在手风琴打开时改变“手风琴项目”的大小并旋转“手风琴图标”： 

1. 选择祖先 落下 画板上的元素（例如“手风琴项目”）
2. 解锁 交互面板 
3. 选择 下拉菜单展开 您先前制定的交互
4. 点击“齿轮”符号位于您在前面步骤中制作的自定义定时动画旁边（例如，“手风琴打开”动画） 
5. 点击“加”符号旁边 操作 在你的动画中插入一项承诺
6. 选择 尺寸 之内 各种各样的
7. 取消选择下方的“设置为初始状态”checkbox 定时
8. 导航 尺寸 并输入“汽车“ 为了 高度 — 这对应于手风琴的高度与其内部内容的高度 
9. 选择 图标 （例如，“手风琴图标”）
10. 点击“加” 符号位于“手风琴项目”旁边 尺寸 你刚刚设定的操作是在该时间戳附加另一个任务——这保证了这两个任务同时执行
11. 选择 旋转 下面 转换  
12. 前往 旋转 并调整 z 轴 到 180度 — 这会旋转图标，使其在折叠面板打开时向上指向
13. 轻敲 节省

笔记： 您可以选择修改每个动作的缓和效果（即动画过渡的加速和减速）。获取有关插值、缓和效果和平滑的更多信息。

为折叠面板的关闭添加动画

接下来，您将为折叠面板关闭设置一个交互。此交互将包含第二次按下折叠面板项或访问者单击折叠面板项外部时发生的任务 — 折叠面板项将恢复到其初始大小，图标将旋转回 0 度。 

要使折叠面板关闭动画化：

1. 选择父级 落下 画布上的元素（例如“手风琴项目”）
2. 揭示 交互面板 
3. 选择 下拉列表打开 你在前面的步骤中设计的交互 
4. 轻敲 选择操作 下面 菜单关闭 
5. 选择 开始动画
6. 点击“加”符号位于定时动画旁边，用于制作自定义动画
7. 为自定义动画指定一个名称（例如“手风琴关闭”）
8. 点击“加”符号将承诺插入到动画中
9. 选择 尺寸 下面 各种各样的
10. 输入 高度 值（例如，80px），与您分配给您的 落下 元素在前面步骤中的初始状态
11. 选择 图标 在画布上或导航器中（例如，“手风琴图标”）
12. 点击“加” 符号位于“手风琴项目”旁边 尺寸 你刚刚制作的操作，在该时间戳添加另一个任务——这确保这两个任务同时动画
13. 选择 旋转 下面 转换 
14. 前往 旋转 并调整 z 轴 到 0度 — 这会将图标旋转回其初始位置，以便在折叠面板关闭时图标会向下
15. 轻敲 节省

这样，您就通过交互成功创建了一个独特的手风琴！