diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 3fc2cb1b00..33b35e4c51 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -89,10 +89,10 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: easing = linear, tick = noop, css, - staticCss, + static_css } = config || null_transition; - if (staticCss) static_class_name = create_static_rule(node, staticCss, uid++); + if (static_css) static_class_name = create_static_rule(node, static_css, uid++); if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++); tick(0, 1); @@ -272,7 +272,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline easing = linear, tick = noop, css, - staticCss + static_css } = config || null_transition; const program = { @@ -291,8 +291,8 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline } else { // if this is an intro, and there's a delay, we need to do // an initial tick and/or apply CSS animation immediately - if (staticCss && !static_class_name) { - static_class_name = create_static_rule(node, staticCss); + if (static_css && !static_class_name) { + static_class_name = create_static_rule(node, static_css); } if (css) { clear_animation(); diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts index 49124914dc..911d558718 100644 --- a/src/runtime/transition/index.ts +++ b/src/runtime/transition/index.ts @@ -4,11 +4,11 @@ import { assign, is_function } from 'svelte/internal'; export type EasingFunction = (t: number) => number; export interface TransitionConfig { + static_css?: string; delay?: number; duration?: number; easing?: EasingFunction; css?: (t: number, u: number) => string; - staticCss?: string; tick?: (t: number, u: number) => void; } @@ -117,17 +117,16 @@ export function slide(node: Element, { const border_bottom_width = parseFloat(style.borderBottomWidth); let displayOverride = ''; - // May want to use a whitelist instead if (style.display.includes('table')) { displayOverride = 'display: block;'; } return { - // Support a custom className to be added before and cleaned up after the thing. - staticCss: displayOverride + 'overflow: hidden;', delay, duration, easing, + static_css: displayOverride + + 'overflow: hidden;', css: t => `opacity: ${Math.min(t * 20, 1) * opacity};` + `height: ${t * height}px;` +