perf: replace JS transition with CSS animation in CodespanToken (#23258)

This commit is contained in:
Algorithm5838
2026-03-31 17:19:47 -05:00
committed by GitHub
parent b10c70cfcf
commit 5fd9db8739
@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { copyToClipboard, unescapeHtml } from '$lib/utils'; import { copyToClipboard, unescapeHtml } from '$lib/utils';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { fade } from 'svelte/transition';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@@ -13,21 +12,24 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
{#if done} <code
<code class="codespan cursor-pointer {!done ? 'fade-in-token' : ''}"
class="codespan cursor-pointer" on:click={() => {
on:click={() => { copyToClipboard(unescapeHtml(token.text));
copyToClipboard(unescapeHtml(token.text)); toast.success($i18n.t('Copied to clipboard'));
toast.success($i18n.t('Copied to clipboard')); }}>{unescapeHtml(token.text)}</code
}}>{unescapeHtml(token.text)}</code >
>
{:else} <style>
<code @keyframes fade-in-token {
transition:fade={{ duration: 100 }} from {
class="codespan cursor-pointer" opacity: 0;
on:click={() => { }
copyToClipboard(unescapeHtml(token.text)); to {
toast.success($i18n.t('Copied to clipboard')); opacity: 1;
}}>{unescapeHtml(token.text)}</code }
> }
{/if} .fade-in-token {
animation: fade-in-token 100ms ease-out;
}
</style>