Skip to content

Commit 461545f

Browse files
benderlBrett-S-OWB
authored andcommitted
cleanup css animation settings
1 parent d365c4f commit 461545f

File tree

1 file changed

+24
-29
lines changed
  • packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart

1 file changed

+24
-29
lines changed

packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,9 @@ const chargePointSumCharging = computed(
249249
///////////////////// Set animation speed //////////////////////////
250250
251251
const powerCategory = (power: number) => {
252-
if (Math.abs(power) >= 5000) return 'large';
253-
if (Math.abs(power) >= 1500) return 'medium';
254-
return 'small';
252+
if (Math.abs(power) >= 5000) return 'large';
253+
if (Math.abs(power) >= 1500) return 'medium';
254+
return 'small';
255255
};
256256
257257
const pvPowerCategory = computed(() => powerCategory(pvPower.value.value));
@@ -752,13 +752,11 @@ const svgRectWidth = computed(
752752
user-select: none;
753753
}
754754
755-
/* ------ */
756755
svg {
757756
width: 100%;
758757
height: 100%;
759758
object-fit: contain;
760759
}
761-
/* ------ */
762760
763761
path {
764762
fill: none;
@@ -774,28 +772,43 @@ path {
774772
path.animated {
775773
stroke: var(--q-white);
776774
stroke-dasharray: 5;
777-
animation: dash 1s linear infinite;
775+
animation: dash 3.5s linear infinite;
778776
}
779777
780778
path.animatedReverse {
781779
stroke: var(--q-white);
782780
stroke-dasharray: 5;
783-
animation: dashReverse 1s linear infinite;
781+
animation: dashReverse 3.5s linear infinite;
784782
}
785783
786-
path.small.animated,
787-
path.small.animatedReverse {
788-
animation-duration: 3.5s;
789-
}
790784
path.medium.animated,
791785
path.medium.animatedReverse {
792786
animation-duration: 1.5s;
793787
}
788+
794789
path.large.animated,
795790
path.large.animatedReverse {
796791
animation-duration: 0.6s;
797792
}
798793
794+
@keyframes dash {
795+
from {
796+
stroke-dashoffset: 10;
797+
}
798+
to {
799+
stroke-dashoffset: 0;
800+
}
801+
}
802+
803+
@keyframes dashReverse {
804+
from {
805+
stroke-dashoffset: 0;
806+
}
807+
to {
808+
stroke-dashoffset: 10;
809+
}
810+
}
811+
799812
path.animated.grid {
800813
stroke: var(--q-negative);
801814
}
@@ -862,24 +875,6 @@ rect {
862875
}
863876
}
864877
865-
@keyframes dash {
866-
from {
867-
stroke-dashoffset: 20;
868-
}
869-
to {
870-
stroke-dashoffset: 0;
871-
}
872-
}
873-
874-
@keyframes dashReverse {
875-
from {
876-
stroke-dashoffset: 0;
877-
}
878-
to {
879-
stroke-dashoffset: 20;
880-
}
881-
}
882-
883878
text {
884879
font-size: v-bind(svgFontSize);
885880
line-height: 1.25;

0 commit comments

Comments
 (0)