Add custom svelte transition to drawer and add local parameter to prevent bad transitions
This commit is contained in:
parent
7236ae80e5
commit
6e5f2c15c0
1 changed files with 19 additions and 2 deletions
|
@ -1,5 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import { slide } from "svelte/transition"
|
|
||||||
import Portal from "svelte-portal"
|
import Portal from "svelte-portal"
|
||||||
import Button from "../Button/Button.svelte"
|
import Button from "../Button/Button.svelte"
|
||||||
import Body from "../Typography/Body.svelte"
|
import Body from "../Typography/Body.svelte"
|
||||||
|
@ -7,7 +6,9 @@
|
||||||
|
|
||||||
export let title
|
export let title
|
||||||
export let fillWidth
|
export let fillWidth
|
||||||
|
|
||||||
let visible = false
|
let visible = false
|
||||||
|
|
||||||
export function show() {
|
export function show() {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
return
|
return
|
||||||
|
@ -21,11 +22,27 @@
|
||||||
}
|
}
|
||||||
visible = false
|
visible = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const easeInOutQuad = x => {
|
||||||
|
return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use a custom svelte transition here because the built-in slide
|
||||||
|
// transition has a horrible overshoot
|
||||||
|
const slide = () => {
|
||||||
|
return {
|
||||||
|
duration: 360,
|
||||||
|
css: t => {
|
||||||
|
const translation = 100 - Math.round(easeInOutQuad(t) * 100)
|
||||||
|
return `transform: translateY(${translation}%);`
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<Portal>
|
<Portal>
|
||||||
<section class:fillWidth class="drawer" transition:slide>
|
<section class:fillWidth class="drawer" transition:slide|local>
|
||||||
<header>
|
<header>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<Heading size="XS">{title}</Heading>
|
<Heading size="XS">{title}</Heading>
|
||||||
|
|
Loading…
Reference in a new issue