fix: property name conversion in custom transitions (#13820)

pull/13834/head
Francesco Zanini 11 months ago committed by GitHub
parent 0b178cecce
commit 185e112377
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
Fix property name conversion in custom transitions

@ -25,10 +25,18 @@ function dispatch_event(element, type) {
} }
/** /**
* Converts a property to the camel-case format expected by Element.animate(), KeyframeEffect(), and KeyframeEffect.setKeyframes().
* @param {string} style * @param {string} style
* @returns {string} * @returns {string}
*/ */
function css_style_from_camel_case(style) { function css_property_to_camelcase(style) {
// in compliance with spec
if (style === 'float') return 'cssFloat';
if (style === 'offset') return 'cssOffset';
// do not rename custom @properties
if (style.startsWith('--')) return style;
const parts = style.split('-'); const parts = style.split('-');
if (parts.length === 1) return parts[0]; if (parts.length === 1) return parts[0];
return ( return (
@ -52,7 +60,7 @@ function css_to_keyframe(css) {
const [property, value] = part.split(':'); const [property, value] = part.split(':');
if (!property || value === undefined) break; if (!property || value === undefined) break;
const formatted_property = css_style_from_camel_case(property.trim()); const formatted_property = css_property_to_camelcase(property.trim());
keyframe[formatted_property] = value.trim(); keyframe[formatted_property] = value.trim();
} }
return keyframe; return keyframe;

Loading…
Cancel
Save