过渡动画示例
本示例展示了如何在 Vue 组件中使用 Gueleton 的离开动画功能。
示例中,我们通过 container.leave 属性为包含多个推文卡片的容器添加了离开动画效果。
当用户点击 “Reload Data” 按钮,并完成数据加载后,当前显示的占位骨架会先执行离开动画,等待动画执行完毕后,再显示新的内容。
点击 Reload Data 查看效果
<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><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>