--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab' title: '让元素随滚动、悬停或点击动起来 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:15+00:00' updated: '2026-10-24T06:23:23+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 您可以让版块、行或任何内容元素动起来。标题滚动进入视野时淡入上升，按钮稍后跟上，或图标在悬停时跳动。它们各自的设置中都有 Animation 面板。示例让标题淡入，再让报名按钮短暂延迟后淡入。 该视频在版块进入视野时淡入按钮和标题。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:23+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 让元素随滚动、悬停或点击动起来 description: |- 您可以让版块、行或任何内容元素动起来。标题滚动进入视野时淡入上升，按钮稍后跟上，或图标在悬停时跳动。它们各自的设置中都有 Animation 面板。示例让标题淡入，再让报名按钮短暂延迟后淡入。 该视频在版块进入视野时淡入按钮和标题。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:42:15+0000' dateModified: '2026-10-24T06:23:23+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab' description: |- 您可以让版块、行或任何内容元素动起来。标题滚动进入视野时淡入上升，按钮稍后跟上，或图标在悬停时跳动。它们各自的设置中都有 Animation 面板。示例让标题淡入，再让报名按钮短暂延迟后淡入。 该视频在版块进入视野时淡入按钮和标题。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 让元素随滚动、悬停或点击动起来. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects) - [给版块配颜色、照片或渐变背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds) - [添加轮播布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout) 您可以让版块、行或任何内容元素动起来。标题滚动进入视野时淡入上升，按钮稍后跟上，或图标在悬停时跳动。它们各自的设置中都有 **Animation** 面板。示例让标题淡入，再让报名按钮短暂延迟后淡入。 该视频在版块进入视野时淡入按钮和标题。 ## 淡入标题和按钮 1. 点击空内容区的 **Add Elements**，再选择 **Section**（**Layout** 选项卡中）。 2. 悬停版块，打开 **More > Settings**。 3. 在 **HTML classes** 下选择 **Align text center**，点击 **Save**。 4. 点击版块上的 **+**，选择 **Button**（**Content** 选项卡中）。其设置随即打开。 5. 输入 `Register now` 到 **Title**，输入 `/register` 到 **Link**。 6. 打开 **Animation** 面板，将 **Animation start** 设为 **On appear**。 7. 将 **Animation in** 设为 **fadeInUp**。 8. 在 **Hidden** 下勾选 **Before in-animation**。 9. 将 **In-delay** 设为 600，点击 **Save**。 10. 再次点击版块上的 **+**，选择 **Text**（**Content** 选项卡中）。它落在按钮上方。 11. 输入标题，例如 `Open day 2026`，在编辑器工具栏中设为 **Heading 2**。 12. 打开 **Animation** 面板。像按钮一样选择 **On appear**、**fadeInUp** 和 **Before in-animation**。 13. 将 **Duration** 设为 800，点击 **Save**。 14. 点击工具栏上的 **Save**。 15. 打开视图菜单（工具栏上的眼睛图标），选择 **Preview**。 ## 更多可试的效果 - **滚动显现：** **On appear**、**fadeInUp**、**Before in-animation**，**Duration** 800。 - **错峰卡片：**三张卡片用同样的效果，**In-delay** 分别为 0、200 和 400。 - **注意跳动：** **On appear**、**pulse**，打开 **Infinite**，**Duration** 1500。 - **悬停跳动：** **On hover**、**pulse**，**Parent number** 为 0，只让元素自己响应。 - **标签显现：** **On trigger** 和 **fadeIn** 用于选项卡内元素，每次打开选项卡都播放。 ## 您会看到的内容 保存文本时，编辑器播放两个效果：标题用 800 毫秒淡入上升，按钮 600 毫秒后跟上。访客在版块滚动进入视野时看到同样的效果，每次页面加载一次。两者在效果开始前都不可见，因为勾选了 **Before in-animation**。 ## 设置 | 设置 | 作用 | 默认值 | |---|---|---| | **Animation start** | 效果播放时机：**On appear**（滚动进入视野）、**On hover**、**On click** 或 **On trigger**（容纳元素的轮播幻灯片、选项卡或折叠打开时） | **No animation** | | **Animation in** | 进入效果：淡入、滑入、缩放、翻转，以及 bounce、pulse、shake 等注意效果 | **No animation** | | **Animation out** | 退出效果，与进入同一列表。只对 **On hover** 和 **On trigger** 显示。 | **No animation** | | **Hidden** | **Before in-animation** 让元素在效果播放前保持不可见。**After in-animation** 在效果结束后隐藏它。 | 都不选 | | **Infinite** | 无限重复效果 | 关 | | **Appear boundary** | 对于 **On appear**：效果在屏幕下方多远处开始，以屏幕高度的百分比计。0 表示元素滚动进入视野时开始；100 表示提前一屏开始。 | 100 | | **Duration** | 效果时长，0 到 3000 毫秒 | 1000 | | **In-delay** | 进入效果前的等待，最长 10000 毫秒 | 0 | | **Out-delay** | 退出效果前的等待，最长 10000 毫秒 | 0 | | **Parent number** | 对于 **On hover** 和 **On click**：访客指向或点击哪个元素。0 是元素自己，1 是其父级，2 是父级的父级。 | 1 | 列没有 **Animation** 面板。布局元素内的单个选项卡、折叠和幻灯片也没有。请改为让里面的元素动起来。 ## 如果您看不到动画 - **元素一直不出现。** **Before in-animation** 在效果播放前隐藏它，但 **Animation in** 为 **No animation**。请在 **Animation in** 中选择效果。 - **效果播一次就停了。** **On appear** 每次页面加载播一次。请重新加载页面再看，或打开 **Infinite** 让效果重复。 - **访客还没到元素，效果就开始了。** **Appear boundary** 太高：100 时效果在元素滚动进入视野前一屏就开始。请在 **Animation** 面板中设为 0。 - **悬停在元素附近就触发了效果。** **Parent number** 为 1，父级在监听指针。请将 **Parent number** 设为 0。 ## 接下来做什么？ - [悬停效果](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)：指针停在元素上时更改颜色、阴影或不透明度。 - [背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)：给动画版块配颜色、照片或渐变。 - [轮播布局](/hc/documentation/learn-dxpr-builder/layout/carousel-layout)：每次打开幻灯片都播放 **On trigger** 效果。