Skip to content

Commit 185e112

Browse files
authored
fix: property name conversion in custom transitions (#13820)
1 parent 0b178ce commit 185e112

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

.changeset/dull-wolves-judge.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
Fix property name conversion in custom transitions

packages/svelte/src/internal/client/dom/elements/transitions.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,18 @@ function dispatch_event(element, type) {
2525
}
2626

2727
/**
28+
* Converts a property to the camel-case format expected by Element.animate(), KeyframeEffect(), and KeyframeEffect.setKeyframes().
2829
* @param {string} style
2930
* @returns {string}
3031
*/
31-
function css_style_from_camel_case(style) {
32+
function css_property_to_camelcase(style) {
33+
// in compliance with spec
34+
if (style === 'float') return 'cssFloat';
35+
if (style === 'offset') return 'cssOffset';
36+
37+
// do not rename custom @properties
38+
if (style.startsWith('--')) return style;
39+
3240
const parts = style.split('-');
3341
if (parts.length === 1) return parts[0];
3442
return (
@@ -52,7 +60,7 @@ function css_to_keyframe(css) {
5260
const [property, value] = part.split(':');
5361
if (!property || value === undefined) break;
5462

55-
const formatted_property = css_style_from_camel_case(property.trim());
63+
const formatted_property = css_property_to_camelcase(property.trim());
5664
keyframe[formatted_property] = value.trim();
5765
}
5866
return keyframe;

0 commit comments

Comments
 (0)