From c6c68a6c3893b9e72a15e515711884226ce555fa Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 17 Jul 2018 17:10:44 +0200 Subject: [PATCH] fix(tabs): content animation in RTL not working (chrome) (#12215) --- src/lib/tabs/tabs-animations.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/lib/tabs/tabs-animations.ts b/src/lib/tabs/tabs-animations.ts index 6a608373b460..af8fbfaac671 100644 --- a/src/lib/tabs/tabs-animations.ts +++ b/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', [