悬停时显示元素

当您将鼠标悬停在父元素上时,使用悬停交互来显示子元素。

利用悬停交互在悬停时显示元素。

在本教程中:

  1. 为悬停条目创建动画
  2. 创建悬停退出动画 
  3. 在其他组件上实现动画

为悬停条目设置动画

  1. 选择你的链接块(作为触发器)
  2. 在“交互”面板中,单击“元素触发器”旁边的加号,然后从选择中选择“鼠标悬停”
  3. 对于悬停事件,从操作列表中选择启动动画
  4. 点击时间动画附近的加号
  5. 命名(例如,滑入)
  6. 选择您想要动画的组件(例如,心脏组件)
  7. 点击定时操作附近的加法符号,然后从选项中选择 Shift
  8. 对于 Shift,为 x 轴分配一个值(例如 -100)
  9. 在“时间”旁边,打开“设置为初始状态”的开关
  10. 对其他要设置动画的元素重复步骤 6 至 9 
  11. 交互面板,(按 Shift 键)并按序列选择组件
  12. 右键点击进行复制
  13. 对于 Shift,将 x 轴恢复为其原始值(0 像素)
  14. 对于时间,更改缓和(例如,缓和)
  15. 减少持续时间(例如,减少到 0.2 秒)

创建悬停退出动画 

  1. 退出刚刚创建的动画 
  2. 在“交互”面板的“悬停时”下,从“操作”列表中选择“启动动画”
  3. 在定时动画中,点击“滑入”旁边的齿轮图标,然后选择“复制”
  4. 激活幻灯片 2
  5. 重命名(例如,优雅地滑出)
  6. 从序列中删除重复的动画(例如 Heart 和 H3 Price) 
  7. 选择时间轴中剩余的动画
  8. 除了计时之外,关闭设置为初始状态
  9. 按照之前的步骤调整缓和和持续时间

在其他组件上实现动画

  1. 选择序列中的任意定时操作 
  2. 在 Impact 旁边选择 Class
  3. 单击所有具有此类的元素并选择仅具有此类的子项
  4. 重复 1-3 以进入悬停状态和退出悬停状态

麦宜云
Ewan Mak 的最新帖子 (查看全部)