Get rid of clip-path animation; Animate toolbars synchronously (#6395)

Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>

src/components/common/profile/ProfileInfo.module.scss

@@ -116,20 +116,6 @@
 
   @include mixins.with-vt-type('profileAvatar');
 
-  &::before {
-    content: '';
-
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    left: 0;
-
-    height: 2rem;
-
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
-  }
-
   > :global(.Transition) {
     width: 100%;
     height: 100%;
@@ -147,6 +133,21 @@
   width: 100%;
   height: 0.125rem;
   padding: 0 0.375rem;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: -0.5rem;
+    right: 0;
+    left: 0;
+
+    height: 2rem;
+
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+
+  @include mixins.with-vt-type('profileAvatar');
 }
 
 .photoDash {
@@ -429,62 +430,35 @@
   inset: 0;
 }
 
-@include mixins.on-active-vt('profileAvatar') {
-  &::view-transition-group(.info),
-  &::view-transition-group(.title),
-  &::view-transition-group(.status) {
-    z-index: 1;
-  }
-}
-
 @include mixins.on-active-vt('profileAvatar') {
   &::view-transition-old(.profileInfo),
   &::view-transition-new(.profileInfo) {
     animation-name: none;
   }
-}
 
-// Delay before showing buttons & overlay
+  &::view-transition-group(.photoDashes) {
-@include mixins.on-active-vt('profileExpand') {
+    z-index: 1;
-  &::view-transition-new(.photoWrapper),
-  &::view-transition-new(.info) {
-    animation-delay: 0.25s;
-  }
-}
-
-// Hide buttons & overlay immediately
-@include mixins.on-active-vt('profileCollapse') {
-  &::view-transition-old(.photoWrapper),
-  &::view-transition-old(.info) {
-    animation-duration: 0.1s;
   }
 }
 
 @include mixins.on-active-vt('profileExpand') {
   &::view-transition-old(.avatar) {
     z-index: -1;
+    animation-name: none;
   }
 
   &::view-transition-new(.avatar) {
     :local {
       animation-name: profileExpandAvatar;
-      animation-duration: inherit;
-      animation-timing-function: inherit;
-      animation-fill-mode: forwards;
     }
 
     @keyframes profileExpandAvatar {
-      from {
+      0% {
+        opacity: 0;
+      }
+
+      50%, 100% {
         opacity: 1;
-        clip-path: inset(0 0 0 0 round 50%);
-      }
-
-      25% {
-        clip-path: inset(0 0 0 0 round 50%);
-      }
-
-      to {
-        clip-path: inset(0 0 0 0 round 0%);
       }
     }
   }
@@ -493,29 +467,21 @@
 @include mixins.on-active-vt('profileCollapse') {
   &::view-transition-new(.avatar) {
     z-index: -1;
+    animation-name: none;
   }
 
   &::view-transition-old(.avatar) {
     :local {
       animation-name: profileCollapseAvatar;
-      animation-duration: inherit;
-      animation-timing-function: inherit;
-      animation-fill-mode: forwards;
     }
 
     @keyframes profileCollapseAvatar {
-      from {
+      0% {
-        clip-path: inset(0 0 0 0 round 0%);
-      }
-
-      25% {
         opacity: 1;
-        clip-path: inset(0 0 0 0 round 50%);
       }
 
-      to {
+      50%, 100% {
         opacity: 0;
-        clip-path: inset(0 0 0 0 round 50%);
       }
     }
   }

src/components/common/profile/ProfileInfo.tsx

@@ -350,7 +350,7 @@ const ProfileInfo = ({
     const activeDashIndex = currentPhotoIndex >= MAX_PHOTO_DASH_COUNT ? MAX_PHOTO_DASH_COUNT - 1 : currentPhotoIndex;
 
     return (
-      <div className={styles.photoDashes}>
+      <div className={styles.photoDashes} style={createVtnStyle('photoDashes', true)}>
         {enumerator.map((_, i) => (
           <span className={buildClassName(styles.photoDash, i === activeDashIndex && styles.photoDash_current)} />
         ))}