perf: replace JS transition with CSS animation in CodespanToken (#23258)
This commit is contained in:
+21
-19
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user