CCA: Make gridline always transition

Bug: b/176266123
Test: Manually toggle different grid line type from toggle button and
grid settings.

Change-Id: I59dfb3b46415ad0b1a6206ecf4a31344479f0ede
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611152
Commit-Queue: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Auto-Submit: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841409}

chromeos/components/camera_app_ui/resources/css/main.css

@@ -1020,13 +1020,13 @@ body.view-grid-settings.grid-4x4 #preview-grid-vertical::before {
   width: 50%;
 }
 
-#preview-grid-horizontal.animate,
-#preview-grid-horizontal.animate::before {
+#preview-grid-horizontal,
+#preview-grid-horizontal::before {
   transition: height 500ms, visibility 500ms;
 }
 
-#preview-grid-vertical.animate,
-#preview-grid-vertical.animate::before {
+#preview-grid-vertical,
+#preview-grid-vertical::before {
   transition: width 500ms, visibility 500ms;
 }
 

chromeos/components/camera_app_ui/resources/js/views/camera/options.js

@@ -95,7 +95,6 @@ export class Options {
     this.audioTrack_ = null;
 
     [['#switch-device', () => this.switchDevice_()],
-     ['#toggle-grid', () => this.animatePreviewGrid_()],
      ['#open-settings', () => nav.open(ViewName.SETTINGS)],
     ]
         .forEach(
@@ -166,15 +165,6 @@ export class Options {
     state.set(PerfEvent.CAMERA_SWITCHING, false, {hasError: !isSuccess});
   }
 
-  /**
-   * Animates the preview grid.
-   * @private
-   */
-  animatePreviewGrid_() {
-    Array.from(document.querySelector('#preview-grid').children)
-        .forEach((grid) => util.animateOnce(grid));
-  }
-
   /**
    * Maps MediaTrackSettings.facingMode to CCA facing type.
    * @param {string|undefined} facing The target facingMode to map.