jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable energy distribution animation if prefers-reduced-motion is set (#24581)

Browse Source 
* Disable energy distribution animation if prefers-reduced-motion is set

* Move check to willUpdate. Remove circle circumference animation
This commit is contained in:
karwosts 2025-03-11 06:57:43 -07:00 committed by GitHub
parent d0545fe827
commit e141b4dbee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
View File

@ -47,6 +47,8 @@ class HuiEnergyDistrubutionCard
@state() private _data?: EnergyData;
@state() private _animate = true;
protected hassSubscribeRequiredHostProps = ["_config"];
public setConfig(config: EnergyDistributionCardConfig): void {
@ -78,6 +80,12 @@ class HuiEnergyDistrubutionCard
);
}
protected willUpdate() {
if (!this.hasUpdated && matchMedia("(prefers-reduced-motion)").matches) {
this._animate = false;
}
}
protected render() {
if (!this._config) {
return nothing;
@ -349,7 +357,7 @@ class HuiEnergyDistrubutionCard
</div>
<svg width="80" height="30">
<path d="M40 0 v30" id="gas" />
${gasUsage
${gasUsage && this._animate
? svg`<circle
r="1"
class="gas"
@ -382,7 +390,7 @@ class HuiEnergyDistrubutionCard
</div>
<svg width="80" height="30">
<path d="M40 0 v30" id="water" />
${waterUsage
${waterUsage && this._animate
? svg`<circle
r="1"
class="water"
@ -577,7 +585,7 @@ class HuiEnergyDistrubutionCard
? html`<div class="circle-container water bottom">
<svg width="80" height="30">
<path d="M40 30 v-30" id="water" />
${waterUsage
${waterUsage && this._animate
? svg`<circle
r="1"
class="water"
@ -671,7 +679,7 @@ class HuiEnergyDistrubutionCard
d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
vector-effect="non-scaling-stroke"
></path>
${returnedToGrid && hasSolarProduction
${returnedToGrid && hasSolarProduction && this._animate
? svg`<circle
r="1"
class="return"
@ -690,7 +698,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${solarConsumption
${solarConsumption && this._animate
? svg`<circle
r="1"
class="solar"
@ -705,7 +713,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${gridConsumption
${gridConsumption && this._animate
? svg`<circle
r="1"
class="grid"
@ -720,7 +728,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${solarToBattery
${solarToBattery && this._animate
? svg`<circle
r="1"
class="battery-solar"
@ -735,7 +743,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${batteryConsumption
${batteryConsumption && this._animate
? svg`<circle
r="1"
class="battery-house"
@ -750,7 +758,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${batteryFromGrid
${batteryFromGrid && this._animate
? svg`<circle
r="1"
class="battery-from-grid"
@ -766,7 +774,7 @@ class HuiEnergyDistrubutionCard
</animateMotion>
</circle>`
: ""}
${batteryToGrid
${batteryToGrid && this._animate
? svg`<circle
r="1"
class="battery-to-grid"
@ -1036,16 +1044,20 @@ class HuiEnergyDistrubutionCard
border-width: 2px;
}
.circle svg circle {
animation: rotate-in 0.6s ease-in;
transition:
stroke-dashoffset 0.4s,
stroke-dasharray 0.4s;
fill: none;
}
@keyframes rotate-in {
from {
stroke-dashoffset: 238.76104;
stroke-dasharray: 238.76104;
@media not (prefers-reduced-motion) {
.circle svg circle {
animation: rotate-in 0.6s ease-in;
transition:
stroke-dashoffset 0.4s,
stroke-dasharray 0.4s;
}
@keyframes rotate-in {
from {
stroke-dashoffset: 238.76104;
stroke-dasharray: 238.76104;
}
}
}
.card-actions a {