# 动态 GIF：停止播放！

**URL:** <https://meta.discourse.org/t/animated-gifs-make-it-stop/187607>\
**Category:** Feature\
**Created:** [2021年四月21日 11:30 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607 "2021-04-21T11:30:24Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年五月20日 21:36 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/27 "2021-05-20T21:36:37Z")

</div>

此项工作已完成并已合并，动画图片将不再以灯箱模式显示。上方的[示例](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/18?u=pmusaraj)已更新（现有帖子需要重新烘焙才能生效）。

稍后将进行向后移植。

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2021年五月25日 15:00 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/28 "2021-05-25T15:00:31Z")

</div>

此主题已在 4 天后自动关闭，不再允许新回复。

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2021年五月28日 01:19 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/29 "2021-05-28T01:19:07Z")

</div>

这个很有趣，想要播放一个去剧透的动图是不可能的：

![american psycho glitch GIF by u̶͛͗̽ n̵͇ͨ g̵̼͂ l̵᷅ t̵̄ c̵̃͘ h̵͚ m̵͇͑e͔](https://global.discourse-cdn.com/meta/original/3X/7/b/7b7995ac25c7c351795ac107368d0ced50d9a05d.webp)

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2021年五月28日 01:33 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/30 "2021-05-28T01:33:33Z")

</div>



---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2021年五月28日 02:02 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/32 "2021-05-28T02:02:59Z")

</div>

> [@awesomerobot](#):
>
> 这个挺有趣，无法播放经过防剧透处理的 GIF 动图。

虽然不完全相关，但我见过类似的问题：对于被剧透标签遮挡的图片，用户只想揭开图片，结果却直接弹出了完整尺寸的图片。这当然与 GIF 的问题无关，但想提一下，因为这同样涉及点击位于剧透标签后的图片。

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年五月28日 02:34 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/33 "2021-05-28T02:34:28Z")

</div>

确实有趣！解决这个问题的一个方法是禁用 spoiler 元素内的灯箱和动画图片暂停。这仅通过 CSS 就非常容易实现：

```scss
.spoiled {
  img.animated,
  .lightbox {
    pointer-events: none;
  }
}

```

我们也可以让灯箱和动画暂停仅在内容未模糊时生效，但这与 spoiler 作为切换开关的行为不兼容。不过，如果我们决定将 spoiler 的行为改为单向（点击后取消模糊且不再恢复），那么这也行得通。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2021年五月29日 11:59 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/34 "2021-05-29T11:59:37Z")

</div>

> [@pmusaraj](#):
>
> 但如果将“折叠”设为可切换状态，那可能行不通。不过，如果我们决定将折叠行为改为单向（点击即取消模糊，仅此而已），那这也行得通。

我真的不建议这样做。就我个人而言，我认为可切换功能对于回顾我的帖子（无论是在预览阶段还是发布后）非常重要，以确保我正确地模糊了所有内容。如果只能单向操作，一旦我取消模糊文本以检查_拼写错误_，我就别无选择，只能刷新页面来再次确认模糊的位置。而且我经常需要多次这样做（因为我会进行编辑），所以每次都要刷新页面会非常不便。

不过，如果你只是讨论让_图片_的取消模糊变为单向操作，那可能问题不大。（我在重新阅读你的帖子之前就回复了，所以我觉得我可能漏掉了一些上下文，但强调可切换功能_总体上_的实用性总归没有坏处，即使它对图片来说不是特别重要。）

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年六月1日 16:55 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/35 "2021-06-01T16:55:53Z")

</div>

@cvx 已针对 spoiler 元素实现了修复：对于拥有独立点击操作（如灯箱、动图、链接、视频、输入框等）的元素，模糊效果为单向。更多详情请参阅 [此提交](https://github.com/discourse/discourse-spoiler-alert/commit/f2bf7e5cc49c6d7c9d60c5352ae8d1a9edbcdf4b)。

> [@seanblue](#):
>
> 就我个人而言，我认为切换功能对于审查我的帖子（包括预览和发布后）非常重要，以确保所有内容都已适当模糊。

在预览中，spoiler 支持切换。在已发布的帖子中，存在一个变通方法：点击图片旁边的空白区域即可重新模糊。您可以在 Kris 上方发布的动图中尝试此操作。

---

<div class="post-metadata">

**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\
**Post date:** [2021年六月2日 11:31 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/38 "2021-06-02T11:31:29Z")

</div>

> [@pmusaraj](#):
>
> 在帖子中有一个变通方法：点击图片旁边的空白区域即可重新模糊图片。

在我的 iPhone 8 上，当屏幕处于竖屏模式时此方法无效，因为图片旁边没有空白区域。不过，我确实想不出更好的解决办法。总体而言，这似乎是一个合理的方案。

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2021年七月7日 06:08 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/39 "2021-07-07T06:08:49Z")

</div>

这真是一个很棒的功能，感谢 @pmusaraj :conf

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2021年七月7日 06:08 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/40 "2021-07-07T06:08:52Z")

</div>



[上一頁](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607.md?page=1)