跳到主要内容
ZH

21 个图标 · interaction="hover"

悬停动态图标

这些图标在指针移入时正向播放，移出时反向播放，动效始终跟随光标，不会停在一半。适合提示即将打开什么的导航项和按钮：垃圾桶盖掀起、设置齿轮转动、文件夹打开。

全部悬停图标

交互表现

在 mouseenter 时正向播放，在 mouseleave 时反向播放。

当用户偏好减少动态效果时，悬停不会播放动画。在触摸屏上轻触不会触发悬停动画；图标位于可聚焦元素内时，键盘聚焦也会触发动画。React 组件会处理好这一切，您只需挑选图标。

适用场景

  • 侧边栏和导航菜单项
  • 点击前先掀起盖子的删除按钮
  • 设置和个人资料链接
  • 放大和缩小控件
  • 页脚中的社交链接

按类别

在 React 中使用

这里列出的图标默认使用这种交互。其他图标也可以使用：传入 interaction 属性即可。

import UseAnimations from 'react-useanimations';
import bookmark from 'react-useanimations/lib/bookmark';

// Bookmark 默认使用 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

用 render 属性把图标放进链接或按钮里：这样元素获得键盘焦点时也会播放动画，而在触摸屏上轻触不会触发。

import archive from 'react-useanimations/lib/archive';

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> 归档
    </a>
  )}
/>

所有属性都在文档中。在 React 之外，这些图标就是 Lottie JSON 文件；Lottie 图标页面介绍了如何用 lottie-web 实现这些交互。

常见问题

哪些图标使用“悬停”交互？

共 21 个图标：Calendar、Edit、Explore、Folder、Home、Info、Settings、Trash、Trash V2、Zoom In、Zoom Out、Archive、Copy、Mail、Share 等另外 6 个。悬停图标通常用于导航项、删除按钮、设置、缩放控件和社交链接。

用户偏好减少动态效果时会怎样？

当用户偏好减少动态效果时，悬停不会播放动画。React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。

如何更改图标的交互方式？

每个图标默认播放为它设计的交互。给其他任意图标传入 interaction="hover"，就能让它获得这种效果；传入其他值（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）则可换成别的交互。autoplay、loop 和 speed 属性用于调整播放方式。