fix(tabs): content animation in RTL not working (chrome) (#12215)

Author: devversion

src/lib/tabs/tabs-animations.ts

@@ -22,8 +22,14 @@ export const matTabsAnimations: {
   translateTab: trigger('translateTab', [
     // Note: transitions to `none` instead of 0, because some browsers might blur the content.
     state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),
-    state('left', style({transform: 'translate3d(-100%, 0, 0)'})),
-    state('right', style({transform: 'translate3d(100%, 0, 0)'})),
+
+    // If the tab is either on the left or right, we additionally add a `min-height` of 1px
+    // in order to ensure that the element has a height before its state changes. This is
+    // necessary because Chrome does seem to skip the transition in RTL mode if the element does
+    // not have a static height and is not rendered. See related issue: #9465
+    state('left', style({transform: 'translate3d(-100%, 0, 0)', minHeight: '1px'})),
+    state('right', style({transform: 'translate3d(100%, 0, 0)', minHeight: '1px'})),
+
     transition('* => left, * => right, left => center, right => center',
         animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
     transition('void => left-origin-center', [