fix(aio): fix tab animations on CodeTabsComponent

In our attempt to remove the material ripple effect from tab labels, we were
killing all `transform`-based animations on other `md-tab-group` elements, such
as animating the content when entering/leaving. (This wasn't an issue on Chrome,
because it didn't respect our `!important` flag.)
This commit fixes it by properly hiding the ripple effect (using a feature
introduced in angular/material2@e4789c7b8) and allowing other animations to
execute normally.

Fixes #17998

aio/src/app/embedded/code/code-tabs.component.spec.ts

@@ -83,6 +83,13 @@ describe('CodeTabsComponent', () => {
 
       expect(classes).toEqual(['foo-class', 'bar-class']);
     });
+
+    it('should disable ripple effect on tab labels', () => {
+      createComponent();
+      const tabsGroupComponent = codeTabsDe.query(By.directive(MdTabGroup)).componentInstance;
+
+      expect(tabsGroupComponent.disableRipple).toBe(true);
+    });
   });
 
   describe('(tab content)', () => {

aio/src/app/embedded/code/code-tabs.component.ts

@@ -21,7 +21,7 @@ export interface TabInfo {
 @Component({
   selector: 'code-tabs',
   template: `
-    <md-tab-group class="code-tab-group">
+    <md-tab-group class="code-tab-group" disableRipple>
       <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
         <ng-template md-tab-label>
           <span class="{{ tab.class }}">{{ tab.title }}</span>
@@ -66,8 +66,8 @@ export class CodeTabsComponent implements OnInit {
     for (let i = 0; i < codeExamples.length; i++) {
       const codeExample = codeExamples.item(i);
       const tab = {
-        code: codeExample.innerHTML,
         class: codeExample.getAttribute('class'),
+        code: codeExample.innerHTML,
         language: codeExample.getAttribute('language'),
         linenums: this.getLinenums(codeExample),
         path: codeExample.getAttribute('path') || '',

aio/src/styles/2-modules/_code.scss

@@ -112,11 +112,6 @@ aio-code pre {
 }
 
 
-// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
-code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content {
-  transform: none !important;
-}
-
 [role="tabpanel"] {
     transition: none;
 }