# 애니메이션을 추가한 후 “새롭거나 업데이트된 x개 주제 보기” 정렬이 어긋남

**URL:** https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625
**Category:** UX
**Tags:** bug
**Created:** [12월 18, 2025, 4:48오전 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625 "2025-12-18T04:48:11Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [12월 18, 2025, 4:48오전 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/1 "2025-12-18T04:48:11Z")

</div>

[PR](https://github.com/discourse/discourse/pull/36726)에서 새 토픽 알림에 애니메이션을 추가했습니다. 전반적으로 좋지만, 우연히 원래의 정렬 메커니즘을 깨뜨렸습니다.

그 근본 원인은 `transform: translateX(50%);`가 새로운 애니메이션 CSS인 `animation: float-down 250ms ease-in-out forwards;`와 함께 작동하지 않는 것이었습니다. 애니메이션이 활성화되면 원래의 `transform`이 무효화됩니다.

첨부된 파일에서 이 버그를 확인할 수 있습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/f/cef65fb5ee8f3c3c72256083592a9c81f9c90b3d.png)

---

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [12월 18, 2025, 5:11오전 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/2 "2025-12-18T05:11:50Z")

</div>

`transform`과 float-down `animation`이 서로 충돌하므로, 이를 해결하는 두 가지 방법이 있다고 생각합니다:

1. `dicourse.scss`에 `float-down-center`라는 새로운 애니메이션 클래스를 추가하고, keyframe에 `transform: translateX(50%);`를 포함합니다.
2. `transform` 속성을 사용하지 않고 `width: fit-contenet`, `left: 0`, `right: 0` 및 `margin: auto;`를 사용하여 버튼 정렬 방식을 변경합니다.

이러한 경우라면, 이를 수정하기 위해 PR을 올릴 것입니다.

---

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [12월 18, 2025, 5:47오전 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/3 "2025-12-18T05:47:41Z")

</div>

여기서는 두 번째 방법을 사용하여 PR이 적용됩니다:

> <https://github.com/discourse/discourse/pull/36767>
>
> In #36726, a new animation is added to the new topic notifictaion, however, it a…ccidentally break the center alignment before.
> 
> The root cause is that the \`transform\` attribute is also used in the \`animation: float-down\`, that overrides and invalidates the original \`transform: translateX(50%)\`.
> 
> This PR changes how the element is aligned, so as to fix the alignment problem and remove the original usage of \`transform\`.
> 
> Before:
> \<img width="1914" height="915" alt="image" src="https://github.com/user-attachments/assets/4dd0ad3d-b0d9-4526-ab18-2d47da69eb28" /\>
> 
> After:
> \<img width="1916" height="920" alt="image" src="https://github.com/user-attachments/assets/72af14b1-eb39-432a-9131-2cb38a8c557d" /\>

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [12월 18, 2025, 8:20오전 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/7 "2025-12-18T08:20:57Z")

</div>

@jordan.vidrine 저도 이거 발견한 거 같아서요

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 18, 2025, 7:11오후 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/9 "2025-12-18T19:11:07Z")

</div>

이 문제에 대한 작은 수정을 준비 중이며, 곧 병합하겠습니다.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 18, 2025, 10:23오후 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/10 "2025-12-18T22:23:31Z")

</div>

대신 PR을 병합했습니다. 감사합니다!

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 18, 2025, 10:23오후 UTC](https://meta.discourse.org/t/the-see-x-new-or-updated-topics-is-misaligned-after-adding-animations/391625/11 "2025-12-18T22:23:36Z")

</div>