SVGHMI: fading page switch : defer update of classList to next animate() call when finishing transition.
classList update was happening in the same call as switch_page(), but this call is not meant to do any change in the DOM. This was triggering unwanted style and layout recomputation.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg1109"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="dropdown.svg">
<defs
id="defs1103" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="48.571429"
inkscape:cy="537.14286"
inkscape:document-units="mm"
inkscape:current-layer="svg1109"
showgrid="false"
inkscape:window-width="3840"
inkscape:window-height="2096"
inkscape:window-x="1600"
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata1106">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g14237"
inkscape:label="HMI:DropDown:1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27@/SELECTION"
transform="matrix(0.21561215,0,0,0.21561215,-108.35425,-53.167319)"
style="stroke-width:0.35083869">
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#53676c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.75419343;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect14212"
width="391.99988"
height="130.9433"
x="864.00842"
y="923.98993"
rx="2.4558709"
ry="2.4558709"
inkscape:label="box" />
<rect
inkscape:label="highlight"
ry="2.4558709"
rx="2.4558709"
y="943.10553"
x="864.00842"
height="92.71212"
width="391.99988"
id="rect5497"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.75419331;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<text
id="text14183"
y="1011.9975"
x="881.44226"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#d42aff;fill-opacity:1;stroke:none;stroke-width:0.35083869px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"
inkscape:label="text"><tspan
style="text-align:start;text-anchor:start;fill:#d42aff;stroke-width:0.35083869px"
y="1011.9975"
x="881.44226"
sodipodi:role="line"
id="tspan421">sel_0</tspan></text>
<path
sodipodi:type="star"
style="opacity:1;vector-effect:none;fill:#a7a5a6;fill-opacity:1;stroke:none;stroke-width:0.12376806;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path424"
sodipodi:sides="3"
sodipodi:cx="1200.5"
sodipodi:cy="975"
sodipodi:r1="43.683521"
sodipodi:r2="21.841761"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 1200.5,1018.6835 -18.9155,-32.76262 -18.9155,-32.76264 37.831,0 37.831,0 -18.9155,32.76264 z"
inkscape:transform-center-y="10.92088"
inkscape:label="button" />
</g>
</svg>