diff --git a/src/demo-app/select/select-demo.scss b/src/demo-app/select/select-demo.scss
index f87b50cbe96b..996f1e1411ff 100644
--- a/src/demo-app/select/select-demo.scss
+++ b/src/demo-app/select/select-demo.scss
@@ -12,3 +12,7 @@
padding-right: 0.25em;
}
}
+
+.demo-card {
+ margin-bottom: 30px;
+}
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 716e911ead33..d0094a2e2e71 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -11,10 +11,6 @@
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
- .mat-select-content, .mat-select-panel-done-animating {
- background: mat-color($background, card);
- }
-
.mat-select-value {
color: mat-color($foreground, text);
}
@@ -32,6 +28,8 @@
}
.mat-select-panel {
+ background: mat-color($background, card);
+
.mat-option.mat-selected:not(.mat-option-multiple) {
background: mat-color($background, hover, 0.12);
}
diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index 8cd8376a9755..46f2ea8b4ed5 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -13,9 +13,6 @@ import {
style,
transition,
trigger,
- query,
- animateChild,
- group,
} from '@angular/animations';
/**
@@ -39,7 +36,7 @@ export const matSelectAnimations: {
*/
transformPanel: trigger('transformPanel', [
state('void', style({
- transform: 'scaleY(0)',
+ transform: 'scaleY(0.8)',
minWidth: '100%',
opacity: 0
})),
@@ -53,19 +50,16 @@ export const matSelectAnimations: {
minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
transform: 'scaleY(1)'
})),
- transition('void => *', group([
- query('@fadeInContent', animateChild()),
- animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
- ])),
- transition('* => void', [
- animate('250ms 100ms linear', style({opacity: 0}))
- ])
+ transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
+ transition('* => void', animate('100ms 25ms linear', style({opacity: 0})))
]),
/**
* This animation fades in the background color and text content of the
* select's options. It is time delayed to occur 100ms after the overlay
* panel has transformed in.
+ * @deprecated Not used anymore. To be removed.
+ * @breaking-change 8.0.0
*/
fadeInContent: trigger('fadeInContent', [
state('showing', style({opacity: 1})),
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 4e9f6cf841a8..b0d9f65e3613 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -37,15 +37,8 @@
[@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
(@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
[style.transformOrigin]="_transformOrigin"
- [class.mat-select-panel-done-animating]="_panelDoneAnimating"
[style.font-size.px]="_triggerFontSize"
(keydown)="_handleKeydown($event)">
-
-
-
-
+
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 5f1898207938..64ba2d772222 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -83,11 +83,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
}
.mat-select-panel {
- @include mat-menu-base(8);
+ @include mat-menu-base(4);
padding-top: 0;
padding-bottom: 0;
max-height: $mat-select-panel-max-height;
min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+ border-radius: 4px;
@include cdk-high-contrast {
outline: solid 1px;
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 2f8a152aa0b2..a9d573ad77ac 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1672,14 +1672,11 @@ describe('MatSelect', () => {
describe('animations', () => {
let fixture: ComponentFixture;
- let trigger: HTMLElement;
let formField: HTMLElement;
beforeEach(fakeAsync(() => {
fixture = TestBed.createComponent(BasicSelect);
fixture.detectChanges();
-
- trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
}));
@@ -1702,19 +1699,6 @@ describe('MatSelect', () => {
'Expected placeholder to animate back down to normal position.');
}));
- it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
- trigger.click();
- fixture.detectChanges();
-
- const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
-
- expect(panel.classList).not.toContain('mat-select-panel-done-animating');
-
- flush();
- fixture.detectChanges();
-
- expect(panel.classList).toContain('mat-select-panel-done-animating');
- }));
});
describe('keyboard scrolling', () => {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 6216b8a03080..d8d766a94968 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -218,8 +218,7 @@ export class MatSelectTrigger {}
'(blur)': '_onBlur()',
},
animations: [
- matSelectAnimations.transformPanel,
- matSelectAnimations.fadeInContent
+ matSelectAnimations.transformPanel
],
providers: [
{provide: MatFormFieldControl, useExisting: MatSelect},
@@ -280,9 +279,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
/** The value of the select panel's transform-origin property. */
_transformOrigin: string = 'top';
- /** Whether the panel's animation is done. */
- _panelDoneAnimating: boolean = false;
-
/** Emits when the panel element is finished transforming in. */
_panelDoneAnimatingStream = new Subject();
@@ -520,7 +516,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
this.openedChange.emit(true);
} else {
this.openedChange.emit(false);
- this._panelDoneAnimating = false;
this.overlayDir.offsetX = 0;
this._changeDetectorRef.markForCheck();
}
@@ -743,15 +738,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
}
}
- /**
- * When the panel content is done fading in, the _panelDoneAnimating property is
- * set so the proper class can be added to the panel.
- */
- _onFadeInDone(): void {
- this._panelDoneAnimating = this.panelOpen;
- this._changeDetectorRef.markForCheck();
- }
-
_onFocus() {
if (!this.disabled) {
this._focused = true;
diff --git a/src/material-examples/select-panel-class/select-panel-class-example.css b/src/material-examples/select-panel-class/select-panel-class-example.css
index 2d18f02f1504..090739dbe915 100644
--- a/src/material-examples/select-panel-class/select-panel-class-example.css
+++ b/src/material-examples/select-panel-class/select-panel-class-example.css
@@ -1,11 +1,11 @@
-.example-panel-red .mat-select-content {
+.example-panel-red .mat-select-panel {
background: rgba(255, 0, 0, 0.5);
}
-.example-panel-green .mat-select-content {
+.example-panel-green .mat-select-panel {
background: rgba(0, 255, 0, 0.5);
}
-.example-panel-blue .mat-select-content {
+.example-panel-blue .mat-select-panel {
background: rgba(0, 0, 255, 0.5);
}