“查看 x 个新主题或更新主题”在添加动画后对齐不正确

用户体验
1

PR 添加了新主题提醒的动画。总体来说看起来不错，但它意外地破坏了原始的对齐机制。

其根本原因在于 transform: translateX(50%); 与新的动画 CSS animation: float-down 250ms ease-in-out forwards; 无法协同工作。当动画激活时，原始的 transform 会失效。

可以从附件中看到此错误。

image

1 个赞
2

由于 transform 和浮动动画 animation 之间存在冲突，我认为有两种方法可以解决这个问题：

  1. 在 dicourse.scss 中添加一个新的动画类 float-down-center，并将 transform: translateX(50%); 添加到关键帧中。
  2. 更改按钮的对齐方式，从：
.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: auto;
        right: 50%;
        transform: translateX(50%);
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

更改为：

.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: fit-contenet;
        left: 0;
        right: 0;
        margin: auto;
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

如果是这种情况，我将提交一个拉取请求（PR）以供合并。
请花时间看一下。@bryce

1 个赞
3

(作者已删除帖子)

2 个赞
7

@jordan.vidrine 我也注意到了这一点

9

已为此进行一个小修复，很快就会合并。

2 个赞
10

已合并您的拉取请求（PR）。谢谢！

1 个赞