romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

Updated tab bar animation

Browse Source
This commit is contained in:
Romein van Buren 2023-12-23 11:54:10 +01:00
parent 421bde13f5
commit d90d5bcf63
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/tabbar.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher, onMount } from 'svelte';
import { tweened } from 'svelte/motion'; import { tweened } from 'svelte/motion';
import { cubicInOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import Icon from './icon.svelte'; import Icon from './icon.svelte';
export let tabs = []; export let tabs = [];
@ -10,8 +10,8 @@
export let compact = true; export let compact = true;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const activeIndicatorLeft = tweened(0, { easing: cubicInOut, duration: 400 }); const activeIndicatorLeft = tweened(0, { easing: cubicOut, duration: 400 });
const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 }); const activeIndicatorRight = tweened(0, { easing: cubicOut, duration: 400 });
const liElements = {}; const liElements = {};
let navEl; let navEl;
@ -38,6 +38,8 @@
}); });
</script> </script>
<svelte:window on:resize={() => moveActiveIndicator()} />
<nav class="tabs" class:compact bind:this={navEl}> <nav class="tabs" class:compact bind:this={navEl}>
<ul> <ul>
{#each tabs as tab (tab.key)} {#each tabs as tab (tab.key)}