专题列表项点击动画

主题组件
1
:information_source: 摘要 主题列表项点击动画
:eyeglasses: 预览 Theme Creator
: hammer_and_wrench: 仓库 GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item.
: question: 安装指南 如何安装主题或主题组件
: open_book: 不熟悉 Discourse 主题？ 使用 Discourse 主题的入门指南

安装此主题组件

此主题组件在您悬停或点击主题列表项时添加了一个漂亮的动画。

topic-list-item
topic-list-item1228×706 78.6 KB

你好 :wave:

:warning: 该组件需要滑块加载器。

此组件使整行可点击，并为主题列表项添加点击动画。您可以选择一些动画。

  1. push (触摸设备上的默认设置)：点击时，它会向内推并添加背景效果。

  2. background (非触摸设备上的默认设置)：点击时，它会添加背景…

  3. slider：点击时，它会在主题列表项下方添加滑块加载器并隐藏顶部的主滑块。


  4. blur：点击时，它会模糊列表中其他主题。

主题设置
您可以在非触摸设备和触摸设备上分别选择动画。

Screenshot 2023-07-20 at 23.31.55
Screenshot 2023-07-20 at 23.31.55619×289 12.2 KB

23 个赞
2

它感觉和看起来都非常自然，以至于我在预览组件时看不到任何变化。:smile:

在加载时，是否可以在桌面点击时添加推送动画，或者有什么东西可以阻止这样做吗？

6 个赞
3

这样做的想法是在触摸设备上实现类似应用程序的自然点击。因此，如果它是触摸设备，推送动画也可以在桌面视图上运行。

但是，是的，我认为它也可以在非触摸设备上轻松运行。这可能值得一项额外的设置。 :slightly_smiling_face:

4 个赞
4

你好 :wave:

我已将组件更新。DEV: Refactored how the component works and add a new slider animation by VaperinaDEV · Pull Request #1 · VaperinaDEV/topic-list-item-click-animation · GitHub

2 个赞
5

做得非常好。一如既往的精彩，Don。 :slight_smile:

2 个赞
6

你好 :wave:
新的动画（模糊） :tada:

2 个赞
7

聪明。我喜欢 :heart_eyes:

3 个赞
8

做得非常好，Don！我用 Topic List Thumbnails 试了一下，它基本上开箱即用。Push 和 Blur 按预期工作，但 Slider 显示在所有缩略图的顶部，而不是跟在缩略图后面，而 Background 则不起作用（这是可以理解的）。你有没有可能再花点心思完善一下？我希望在桌面上能有滑块功能，或者你肯定会想出其他绝妙的主意！

1 个赞
9

嘿 David :wave:

我合并了一个更新 Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
我使用了 after-topic-list-item 模板的插件出口来显示滑块，但是 Topic List Thumbnails 组件为主题列表添加了网格布局，这意味着它将插件出口视为一个主题列表项，并将它们并排放置。现在我将加载器从模板移到了伪元素，这将增加兼容性。:slightly_smiling_face:

我忘记为它添加 z-index，这对于与 Topic List Thumbnail 一起显示它是必需的。请更新该组件。:slightly_smiling_face:

1 个赞
10

谢谢 Don！我试了一下，它能工作，但滑块的颜色不正确，或者可能是 z-index 问题？此视频中的滑块应该是金色，但它是灰色。我认为它应该是第三色的？我只用它来测试，没有其他 CSS，所以你知道。在更新之前，它显示的是金色，这就是为什么我认为是 z-index :man_shrugging:t3:

1 个赞
11

我查看了您的网站，发现您使用的是未包含 z-index 修复的先前版本。请将组件更新到最新版本。:slightly_smiling_face:

12

谢谢 Don，现在一切都好，我可能更新得太快了 :crazy_face:

一个建议；为非触摸设备提供一个关闭此功能的选项。既然我已经尝试了滑块，我不确定我是否喜欢它，因为它会移除默认滑块，并且会使用户体验不一致。

1 个赞
13

@Don - 喜欢这个！我更希望（就像在 Clickable Topic 主题组件 中一样）悬停时，行/项目内的所有内容光标都变成指针…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}
2 个赞
14

@Don - 似乎 背景颜色 的悬停效果设置仅在单击或点按行/项目后生效，而不是在常规的先前 悬停 时生效（如 Clickable Topic Theme Component 中所示）。

Screenshot 2023-07-22 221738
Screenshot 2023-07-22 2217381810×922 73.2 KB

1 个赞
15

你好 David :wave:

这是一个很棒的主意。我合并了一个更新，添加了一个设置，可以单独关闭触摸设备或非触摸设备上的动画（组件）。

现在您可以选择 none 选项，它将完全关闭该组件。

3 个赞
16

您好 @denvergeeks :waving_hand:

该组件目前仅使整个主题列表项行可点击。因此，最新的主题列表项现在按默认方式工作。这就是为什么光标指针仅在非触摸设备上的主题列表项中显示的原因。:slightly_smiling_face:

该组件分别处理非触摸设备和触摸设备。背景会在非触摸设备上悬停时激活，在触摸设备上点击后激活。但我认为它可能需要一些更新，因为例如在可能具有光标的触摸屏笔记本电脑上，悬停将不起作用。我认为我们可以将其全局激活为桌面视图和指针。:thinking:

我已合并这些更改。

1 个赞
17

您能否详细说明一下您所说的“滑块加载器”依赖项是什么意思？这是另一个主题、插件、JavaScript 库还是其他什么？

3 个赞
18

滑块是新的页面加载动画。在 Discourse 中加载页面时，屏幕顶部会有一个水平进度条。那就是滑块。

它现在被设置为默认值，但可以通过 page loading indicator 设置恢复为原始加载旋转器。

4 个赞
19

嗨 Don，有没有办法让这个与 spinner preloader 一起工作？我个人更喜欢 spinner 而不是 slider loader 来用于我的论坛。

20

你好 :waving_hand:
原因仅在滑块中有效，因为当您单击一个主题时，页面内容会立即清除并更改为加载指示器。因此，没有时间进行动画。使用滑块，它会在下一页加载期间将我们保留在当前页面上，因此我们有时间运行动画。:slightly_smiling_face: