mirror of
https://github.com/kunkunsh/kunkun.git
synced 2025-04-04 14:46:42 +00:00
b4afcaac6c
* fix: change icon in manifest * refactor(ui): move BorderBeam component to ui package and update imports * feat(ui): add new animation components and keyframes utility * chore(deps): remove svelte-motion and related dependencies * chore(deps): add svelte-motion and related dependencies * fix(ui): eslint * fix: extension store demo image display * fix(ui): go to settings item in dropdown menu * format
36 lines
883 B
Svelte
36 lines
883 B
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte"
|
|
import { fly } from "svelte/transition"
|
|
import { cn } from "../../utils"
|
|
|
|
export let words: string[] = ["Hello", "Svelte", "Coders"]
|
|
export let duration: number = 2100
|
|
|
|
let className: string = ""
|
|
export { className as class }
|
|
|
|
let index = 0
|
|
let chnageIndex = () => {
|
|
index = (index + 1) % words.length
|
|
}
|
|
onMount(() => {
|
|
let interval = setInterval(chnageIndex, duration)
|
|
return () => clearInterval(interval)
|
|
})
|
|
// I tried with Svelte Motion but there was a slight delay in the animation
|
|
// so I used the built-in svelte transition
|
|
</script>
|
|
|
|
<div class="overflow-hidden py-2">
|
|
{#key index}
|
|
<!-- Change In, Out Animation for Rotate Effects -->
|
|
<h1
|
|
in:fly={{ y: -50, delay: 200 }}
|
|
out:fly={{ y: 40, duration: 200 }}
|
|
class={cn(className, "text-center")}
|
|
>
|
|
{words[index]}
|
|
</h1>
|
|
{/key}
|
|
</div>
|