fix: Improve zoom animations (#9584)

Author: gonfunko

packages/blockly/core/css.ts

@@ -84,7 +84,14 @@ let content = `
 
 .blocklyBlockCanvas.blocklyCanvasTransitioning,
 .blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
+  transition: transform .15s;
+}
+
+@media (prefers-reduced-motion) {
+  .blocklyBlockCanvas.blocklyCanvasTransitioning,
+  .blocklyBubbleCanvas.blocklyCanvasTransitioning {
+    transition: none;
+  }
 }
 
 .blocklyEmboss {

packages/blockly/core/layer_manager.ts

@@ -73,11 +73,11 @@ export class LayerManager {
    * @internal
    */
   appendToAnimationLayer(elem: IRenderedElement) {
-    const currentTransform = this.dragLayer?.getAttribute('transform');
+    const currentTransform = this.dragLayer?.style.transform;
     // Only update the current transform when appending, so animations don't
     // move if the workspace moves.
-    if (currentTransform) {
-      this.animationLayer?.setAttribute('transform', currentTransform);
+    if (currentTransform && this.animationLayer) {
+      this.animationLayer.style.transform = currentTransform;
     }
     this.animationLayer?.appendChild(elem.getSvgRoot());
   }
@@ -88,10 +88,12 @@ export class LayerManager {
    * @internal
    */
   translateLayers(newCoord: Coordinate, newScale: number) {
-    const translation = `translate(${newCoord.x}, ${newCoord.y}) scale(${newScale})`;
-    this.dragLayer?.setAttribute('transform', translation);
+    const translation = `translate(${newCoord.x}px, ${newCoord.y}px) scale(${newScale})`;
+    if (this.dragLayer) {
+      this.dragLayer.style.transform = translation;
+    }
     for (const [_, layer] of this.layers) {
-      layer.setAttribute('transform', translation);
+      layer.style.transform = translation;
     }
   }
 

packages/blockly/core/zoom_controls.ts

@@ -373,8 +373,10 @@ export class ZoomControls implements IPositionable {
    * @param e A mouse down event.
    */
   private zoom(amount: number, e: PointerEvent) {
+    this.workspace.beginCanvasTransition();
     this.workspace.markFocused();
     this.workspace.zoomCenter(amount);
+    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 150);
     this.fireZoomEvent();
     Touch.clearTouchIdentifier(); // Don't block future drags.
     e.stopPropagation(); // Don't start a workspace scroll.
@@ -459,7 +461,7 @@ export class ZoomControls implements IPositionable {
     this.workspace.zoomCenter(amount);
     this.workspace.scrollCenter();
 
-    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 500);
+    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 150);
     this.fireZoomEvent();
     Touch.clearTouchIdentifier(); // Don't block future drags.
     e.stopPropagation(); // Don't start a workspace scroll.