Locations: Rework the Crossfade transition

Add a start value for the scale to make it more elegant
This commit is contained in:
2020-04-07 19:24:06 +02:00
parent c3c888da52
commit a93571842b
3 changed files with 23 additions and 18 deletions

View File

@@ -4,14 +4,20 @@ import { quartOut } from 'svelte/easing'
// Crossfade transition
export const [send, receive] = crossfade({
duration: d => Math.sqrt(d * 200),
fallback (node, params) {
fallback: (node, params) => {
const {
duration = 600,
easing = quartOut,
start = 0.85
} = params
const style = getComputedStyle(node)
const transform = style.transform === 'none' ? '' : style.transform
const sd = 1 - start
return {
duration: 600,
easing: quartOut,
css: t => `
transform: ${transform} scale(${t});
duration,
easing,
css: (t, u) => `
transform: ${transform} scale(${1 - (sd * u)});
opacity: ${t}
`
}