From c0a41074497e2282113054e50e27e42ba05c0ea6 Mon Sep 17 00:00:00 2001
From: tzhangchi <terry.zhangchi@outlook.com>
Date: Mon, 29 Aug 2022 12:02:32 +0800
Subject: [PATCH] feat(toc): add animation to toc item

---
 .../workspace/docs/components/toc/TOC.tsx     | 20 ++++++++++++++++---
 .../workspace/docs/components/toc/toc.css     | 13 ------------
 2 files changed, 17 insertions(+), 16 deletions(-)
 delete mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css

diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
index 877a17d480..3e9eb11d4a 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
@@ -1,3 +1,4 @@
+import { keyframes } from '@emotion/react';
 import type { Virgo } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { useCurrentEditors } from '@toeverything/datasource/state';
@@ -16,8 +17,21 @@ import {
     getContentByAsyncBlocks,
     getPageTOC,
 } from './toc-util';
-import './toc.css';
 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 }>(
     ({ type, isActive }) => {
         const common = {
@@ -169,9 +183,9 @@ export const TOC = () => {
     const onClick = async (blockId?: string) => {
         setActiveBlockId(blockId);
         const block = await editor.getBlockById(blockId);
-        block.dom.classList.add('toc-scroll-item');
+        block.dom.classList.add(toScrollItemClassName);
         setTimeout(() => {
-            block.dom.classList.remove('toc-scroll-item');
+            block.dom.classList.remove(toScrollItemClassName);
         }, 1000);
         await editor.scrollManager.scrollIntoViewByBlockId(blockId);
     };
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
deleted file mode 100644
index 44364012dc..0000000000
--- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
+++ /dev/null
@@ -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);
-    }
-}