Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 22:07:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(component): startScopedViewTranstion func to support scoped view transition (#8093)

Browse Source 
AF-1293
This commit is contained in:
CatsJuice
2024-09-05 06:45:29 +00:00
parent 73dd1d3326
commit 03c2051926
7 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/component/src/ui/modal/styles.css.ts
View File

@@ -7,10 +7,14 @@ import {
keyframes,
style,
} from '@vanilla-extract/css';
import { vtScopeSelector } from '../../utils/view-transition';
export const widthVar = createVar('widthVar');
export const heightVar = createVar('heightVar');
export const minHeightVar = createVar('minHeightVar');
export const modalVTScope = generateIdentifier('modal');
const overlayShow = keyframes({
from: {
opacity: 0,
@@ -94,14 +98,14 @@ export const modalContentWrapper = style({
animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
animationFillMode: 'forwards',
},
'&.anim-fadeScaleTop.vt-active': {
[`${vtScopeSelector(modalVTScope)} &.anim-fadeScaleTop.vt-active`]: {
viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
},
'&.anim-slideBottom': {
animation: `${contentShowSlideBottom} 0.23s ease`,
animationFillMode: 'forwards',
},
'&.anim-slideBottom.vt-active': {
[`${vtScopeSelector(modalVTScope)} &.anim-slideBottom.vt-active`]: {
viewTransitionName: modalContentViewTransitionNameSlideBottom,
},
},