Revert "fix: Improve zoom animations (#9584)" (#9647)

This reverts commit 3acdf5e536.

packages/blockly/core/css.ts

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

packages/blockly/core/layer_manager.ts

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

packages/blockly/core/zoom_controls.ts

@@ -373,10 +373,8 @@ 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.
@@ -461,7 +459,7 @@ export class ZoomControls implements IPositionable {
     this.workspace.zoomCenter(amount);
     this.workspace.scrollCenter();
 
-    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 150);
+    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 500);
     this.fireZoomEvent();
     Touch.clearTouchIdentifier(); // Don't block future drags.
     e.stopPropagation(); // Don't start a workspace scroll.