「新しいトピックや更新されたトピックを表示」がアニメーション追加後にずれている

UX
1

そのPRは、新しいトピックアラートにアニメーションを追加しました。全体的には良さそうですが、意図せず元の配置メカニズムを壊してしまいました。

その根本的な原因は、transform: translateX(50%);が新しいアニメーションCSSであるanimation: float-down 250ms ease-in-out forwards;と連携して機能しなかったことです。アニメーションが有効になると、元のtransformが無効になります。

バグは添付ファイルで確認できます。

image

「いいね！」 1
2

transform とフロートダウンの animation が互いに競合するため、解決策は2つあると考えられます。

  1. キーフレームに transform: translateX(50%); を含める新しいアニメーションクラス float-down-center を dicourse.scss に追加する。
  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
4

(投稿は投稿者によって削除されました)

5

(投稿は投稿者によって削除されました)

6

(投稿者は投稿を削除しました)

7

@jordan.vidrine 私もそう思ったよ

9

これに対する小さな修正を適用しました。まもなくマージします。

「いいね！」 2
10

プルリクエストをマージしました。ありがとうございます！

「いいね！」 1