diff --git a/web/markdown/markdown-spoiler.react.js b/web/markdown/markdown-spoiler.react.js --- a/web/markdown/markdown-spoiler.react.js +++ b/web/markdown/markdown-spoiler.react.js @@ -13,7 +13,17 @@ function MarkdownSpoiler(props: MarkdownSpoilerProps): React.Node { const { text } = props; - return {text}; + const [spoilerClassName, setSpoilerClassName] = React.useState(css.spoiler); + + const onSpoilerClick = React.useCallback(() => { + setSpoilerClassName(css.revealSpoilerAnimation); + }, [setSpoilerClassName]); + + return ( + + {text} + + ); } const MemoizedMarkdownSpoiler: React.ComponentType = React.memo( diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css --- a/web/markdown/markdown.css +++ b/web/markdown/markdown.css @@ -44,6 +44,19 @@ color: #33332c; cursor: pointer; } +span.revealSpoilerAnimation { + animation: revealSpoiler 1s; +} +@keyframes revealSpoiler { + from { + background: #33332c; + color: #33332c; + } + to { + background: transparent; + color: white; + } +} div.markdown pre { padding: 0.5em 10px;