luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(toc): add animation to toc item

Browse Source
This commit is contained in:
tzhangchi
2022-08-29 12:02:32 +08:00
parent aac9eee6e2
commit c0a4107449
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
View File

@@ -1,3 +1,4 @@
import { keyframes } from '@emotion/react';
import type { Virgo } from '@toeverything/components/editor-core'; import type { Virgo } from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui'; import { styled } from '@toeverything/components/ui';
import { useCurrentEditors } from '@toeverything/datasource/state'; import { useCurrentEditors } from '@toeverything/datasource/state';
@@ -16,8 +17,21 @@ import {
getContentByAsyncBlocks, getContentByAsyncBlocks,
getPageTOC, getPageTOC,
} from './toc-util'; } from './toc-util';
import './toc.css';
import type { ListenerMap, TOCType } from './types'; import type { ListenerMap, TOCType } from './types';
// import './toc.css';
const blinker = keyframes`
0% {
background: rgba(152, 172, 189, 0.1);
}
100% {
background: rgba(152, 172, 189, 0.1);
}
`;
const toScrollItem = styled('div')`
animation: ${blinker} 1s linear;
animation-delay: 1s;
`;
const toScrollItemClassName = toScrollItem.toString().substring(1);
const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
({ type, isActive }) => { ({ type, isActive }) => {
const common = { const common = {
@@ -169,9 +183,9 @@ export const TOC = () => {
const onClick = async (blockId?: string) => { const onClick = async (blockId?: string) => {
setActiveBlockId(blockId); setActiveBlockId(blockId);
const block = await editor.getBlockById(blockId); const block = await editor.getBlockById(blockId);
block.dom.classList.add('toc-scroll-item'); block.dom.classList.add(toScrollItemClassName);
setTimeout(() => { setTimeout(() => {
block.dom.classList.remove('toc-scroll-item'); block.dom.classList.remove(toScrollItemClassName);
}, 1000); }, 1000);
await editor.scrollManager.scrollIntoViewByBlockId(blockId); await editor.scrollManager.scrollIntoViewByBlockId(blockId);
}; };

13
apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
View File

@@ -1,13 +0,0 @@
.toc-scroll-item {
animation: blinker 1s linear;
animation-delay: 1s;
}
@keyframes blinker {
0% {
background: rgba(152, 172, 189, 0.1);
}
100% {
background: rgba(152, 172, 189, 0.1);
}
}