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.
// widget_animate.ysl2
widget_class("Animate") {
||
frequency = 5;
speed = 0;
start = false;
widget_center = undefined;
dispatch(value) {
this.speed = value / 5;
//reconfigure animation
this.request_animate();
}
animate(){
// change animation properties
for(let child of this.element.children){
if(child.nodeName.startsWith("animate")){
if(this.speed != 0 && !this.start){
this.start = true;
this.element.beginElement();
}
if(this.speed > 0){
child.setAttribute("dur", this.speed+"s");
}
else if(this.speed < 0){
child.setAttribute("dur", (-1)*this.speed+"s");
}
else{
this.start = false;
this.element.endElement();
}
}
}
}
init() {
let widget_pos = this.element.getBBox();
this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
}
||
}