Transition Animation Example

This example demonstrates how to use Gueleton’s leave animation feature in Vue components.

In the example, we add leave animation effects to the container containing multiple tweet cards through the container.leave property. When the user clicks the “Reload Data” button and data loading is completed, the currently displayed skeleton placeholder will first execute the leave animation, wait for the animation to finish, and then display the new content.

Note

The actual removal timing of the skeleton placeholder is determined by the end event of the container.leave animation.

This means that the skeleton placeholder will only be removed when the leave animation truly ends, ensuring the smoothness of the animation and user experience.

Click Reload Data to see the effect

Reload data Reset

Loading

控制是否显示骨架屏

Fuzzy 1

调整生成骨架的粒度

Style

Background Color

Container Background Color

type 为 overlay 时效果明显

Network

Limit

预存数据的裁剪规则

Fetch Delay s

模拟网络延迟时间

LeaveTransition.vue

<template>
  <Gueleton
    :data-key="dataKey"
    :data="data"
    :loading="loading"
    :type="type"

    :container="{
      leave: {
        className: 'opacity-0 transition-opacity duration-300',
      }
    }"
    v-slot="{ data }"
  >
    <div class="flex flex-col gap-4 p-4 bg-(--color-red-50)">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

<script setup>
import { computed } from 'vue'
import TweetCard from './TweetCard.vue';

import { gueletonOptions } from '../../../store/gueleton-options';
import { useStore } from '@nanostores/vue';

const $gueletonOptions = useStore(gueletonOptions);

const dataKey = computed(() => $gueletonOptions.value.dataKey);
const data = computed(() => $gueletonOptions.value.data);
const loading = computed(() => $gueletonOptions.value.loading);

const type = computed(() => $gueletonOptions.value.type);

</script>

TweetCard.vue

<template>
  <!-- Summary Card (thumbnail) - Tailwind CSS -->
  <div class="p-4 border rounded-lg shadow-sm bg-white not-content">
    <!-- Tweet header -->
    <div class="flex items-start gap-3">
      <div class="h-12 w-12">
        <img class="size-full rounded-full object-cover"
          :src="avatar" alt="avatar">
      </div>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-sm">{{ author }}</span>
          <span class="text-gray-500 text-sm">@user · {{ date }}</span>
        </div>
        <p class="mt-2 text-gray-800">
          {{ content }}
        </p>
      </div>
    </div>

    <!-- Tweet actions -->
    <div class="mt-3 flex items-center justify-between text-gray-500 text-sm">
      <div class="flex gap-6">
        <button class="flex items-center gap-2 hover:text-blue-500">💬 <span>{{ comments }}</span></button>
        <button class="flex items-center gap-2 hover:text-green-500">🔁 <span>{{ retweets }}</span></button>
        <button class="flex items-center gap-2 hover:text-red-500">❤️ <span>{{ likes }}</span></button>
      </div>
      <div class="text-xs">Translate</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import type { TweetCard } from '../../../lib/mock-utils';

defineProps<TweetCard>();
</script>