Emoji 轮播组件

为了过几天传播学院的比赛的路演，这几天在用代码做动画

下面是临时写的一个 emoji 轮播组件：

<iframe src="https://comments-generation-mock-ui.vercel.app/demo/emoji-carousel" style="height:200px"></iframe>

<br>

目前是用 svelte 自带的 transition 的简单实现，但是这样性能不高，下面是一个简单的测试：

<iframe src="https://comments-generation-mock-ui.vercel.app/demo/emoji-carousel/grid" style="height:330px"></iframe>

<br>

组件代码：

<script>
  import { afterUpdate, onMount } from "svelte";
  import { blur, scale } from "svelte/transition";

  export let emoji = "";
  export let start = 0.65;
  export let delay = 100;
  export let amount = 1;

  let first = true;
  let show = false;

  onMount(() => {
    show = true;
  });

  afterUpdate(() => {
    (first && emoji && show) && (first = false);
  });
</script>

<div class="relative aspect-1 [&>*]:(absolute left-1/2 top-1/2 -translate-1/2)">
  {#if emoji && show}
    {#key emoji}
      <div in:blur|global={{ delay: first ? 0 : delay, opacity: 1, amount }} out:blur={{ opacity: 1, amount }}>
        <div in:scale|global={{ delay: first ? 0 : delay, start }} out:scale={{ start }} class={emoji} />
      </div>
    {/key}
  {/if}
</div>