From a1d71f003d1a20ce1c4e54ea25aab416840e5abf Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 07:32:26 -0700 Subject: [PATCH 1/4] support removing attributes from animated elements --- targets/web/src/applyAnimatedValues.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index e05b84bf63..36f50d1840 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/targets/web/src/applyAnimatedValues.ts @@ -22,7 +22,7 @@ const attributeCache: Lookup = {} type Instance = HTMLDivElement & { style?: Lookup } export function applyAnimatedValues(instance: Instance, props: Lookup) { - if (!instance.nodeType || !instance.setAttribute) { + if (!instance.nodeType || !instance.setAttribute || !instance.removeAttribute) { return false } @@ -52,7 +52,7 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { )) ) - if (children !== void 0) { + if (props.hasOwnProperty('children')) { instance.textContent = children } @@ -70,7 +70,12 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { // Apply DOM attributes names.forEach((name, i) => { - instance.setAttribute(name, values[i]) + const value = values[i] + if (value !== void 0) { + instance.setAttribute(name, value) + } else { + instance.removeAttribute(name) + } }) if (className !== void 0) { @@ -82,7 +87,7 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { if (scrollLeft !== void 0) { instance.scrollLeft = scrollLeft } - if (viewBox !== void 0) { + if (props.hasOwnProperty('viewBox')) { instance.setAttribute('viewBox', viewBox) } } From 0b58a5819f4372b5737b93576155c15675797af0 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 07:33:30 -0700 Subject: [PATCH 2/4] add changeset --- .changeset/animate-attribute-removal.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/animate-attribute-removal.md diff --git a/.changeset/animate-attribute-removal.md b/.changeset/animate-attribute-removal.md new file mode 100644 index 0000000000..41218e043f --- /dev/null +++ b/.changeset/animate-attribute-removal.md @@ -0,0 +1,5 @@ +--- +'@react-spring/web': patch +--- + +fix: support removing attributes from animated elements \ No newline at end of file From b6dd8cbfdff58f0550c14db1b891a1d61a0cb578 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 07:37:38 -0700 Subject: [PATCH 3/4] allow viewBox removal --- targets/web/src/applyAnimatedValues.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index 36f50d1840..1109aefc52 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/targets/web/src/applyAnimatedValues.ts @@ -88,7 +88,11 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { instance.scrollLeft = scrollLeft } if (props.hasOwnProperty('viewBox')) { - instance.setAttribute('viewBox', viewBox) + if (viewBox !== void 0) { + instance.setAttribute('viewBox', viewBox) + } else { + instance.removeAttribute('viewBox') + } } } From 0763287d7be08f55251055cb746559f91cbd9843 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Mon, 16 Sep 2024 08:57:16 -0700 Subject: [PATCH 4/4] run prettier --- .changeset/animate-attribute-removal.md | 10 +++++----- targets/web/src/applyAnimatedValues.ts | 6 +++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/.changeset/animate-attribute-removal.md b/.changeset/animate-attribute-removal.md index 41218e043f..48aa95ed5e 100644 --- a/.changeset/animate-attribute-removal.md +++ b/.changeset/animate-attribute-removal.md @@ -1,5 +1,5 @@ ---- -'@react-spring/web': patch ---- - -fix: support removing attributes from animated elements \ No newline at end of file +--- +'@react-spring/web': patch +--- + +fix: support removing attributes from animated elements diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index 1109aefc52..b78bf9ad98 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/targets/web/src/applyAnimatedValues.ts @@ -22,7 +22,11 @@ const attributeCache: Lookup = {} type Instance = HTMLDivElement & { style?: Lookup } export function applyAnimatedValues(instance: Instance, props: Lookup) { - if (!instance.nodeType || !instance.setAttribute || !instance.removeAttribute) { + if ( + !instance.nodeType || + !instance.setAttribute || + !instance.removeAttribute + ) { return false }