PR 에서 새 토픽 알림에 애니메이션을 추가했습니다. 전반적으로 좋지만, 우연히 원래의 정렬 메커니즘을 깨뜨렸습니다.
그 근본 원인은 transform: translateX(50%);가 새로운 애니메이션 CSS인 animation: float-down 250ms ease-in-out forwards;와 함께 작동하지 않는 것이었습니다. 애니메이션이 활성화되면 원래의 transform이 무효화됩니다.
첨부된 파일에서 이 버그를 확인할 수 있습니다.
1개의 좋아요
transform과 float-down animation이 서로 충돌하므로, 이를 해결하는 두 가지 방법이 있다고 생각합니다:
dicourse.scss에 float-down-center라는 새로운 애니메이션 클래스를 추가하고, keyframe에 transform: translateX(50%);를 포함합니다.transform 속성을 사용하지 않고 width: fit-contenet, left: 0, right: 0 및 margin: auto;를 사용하여 버튼 정렬 방식을 변경합니다.
이러한 경우라면, 이를 수정하기 위해 PR을 올릴 것입니다.
1개의 좋아요
여기서는 두 번째 방법을 사용하여 PR이 적용됩니다:
main ← small-lovely-cat:fix-misalignment-new-topic
merged 10:23PM - 18 Dec 25 UTC
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" />
2개의 좋아요
@jordan.vidrine 저도 이거 발견한 거 같아서요
이 문제에 대한 작은 수정을 준비 중이며, 곧 병합하겠습니다.
2개의 좋아요
