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>
|
||||
import { slide } from "svelte/transition"
|
||||
import Portal from "svelte-portal"
|
||||
import Button from "../Button/Button.svelte"
|
||||
import Body from "../Typography/Body.svelte"
|
||||
|
@ -7,7 +6,9 @@
|
|||
|
||||
export let title
|
||||
export let fillWidth
|
||||
|
||||
let visible = false
|
||||
|
||||
export function show() {
|
||||
if (visible) {
|
||||
return
|
||||
|
@ -21,11 +22,27 @@
|
|||
}
|
||||
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>
|
||||
|
||||
{#if visible}
|
||||
<Portal>
|
||||
<section class:fillWidth class="drawer" transition:slide>
|
||||
<section class:fillWidth class="drawer" transition:slide|local>
|
||||
<header>
|
||||
<div class="text">
|
||||
<Heading size="XS">{title}</Heading>
|
||||
|
|
Loading…
Reference in a new issue