mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-12 00:57:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add profile-appear animation to enhance profile-info entry transition

Browse Source
This commit is contained in:
MartinBraquet
2026-05-10 16:43:40 +02:00
parent d57bbcd021
commit 16f62ebdc0
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/profile/profile-info.tsx
View File

@@ -141,7 +141,9 @@ export function ProfileInfo(props: {
>
{user.name?.charAt(0).toUpperCase()}
</div>
<div className={clsx('min-w-0 flex-1', !profile.pinned_url && 'ml-6')}>
<div
className={clsx('min-w-0 flex-1 animate-profile-appear', !profile.pinned_url && 'ml-6')}
>
<ProfileHeader
user={user}
userActivity={userActivity}

15
web/styles/globals.css
View File

@@ -542,6 +542,21 @@ ol > li::marker {
animation: fade-out-slow 3s ease-out forwards;
}
@keyframes profile-appear {
from {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.animate-profile-appear {
animation: profile-appear 0.7s ease-out;
}
.guidance {
opacity: 0.7;
font-size: 14px;