diff --git a/components/core/animation/notification.ts b/components/core/animation/notification.ts
index 3a882984e7..0ae20f7493 100644
--- a/components/core/animation/notification.ts
+++ b/components/core/animation/notification.ts
@@ -10,6 +10,10 @@ export const notificationMotion: AnimationTriggerMetadata = trigger('notificatio
transition('* => enterRight', [style({ opacity: 0, transform: 'translateX(5%)' }), animate('100ms linear')]),
state('enterLeft', style({ opacity: 1, transform: 'translateX(0)' })),
transition('* => enterLeft', [style({ opacity: 0, transform: 'translateX(-5%)' }), animate('100ms linear')]),
+ state('enterTop', style({ opacity: 1, transform: 'translateY(0)' })),
+ transition('* => enterTop', [style({ opacity: 0, transform: 'translateY(-5%)' }), animate('100ms linear')]),
+ state('enterBottom', style({ opacity: 1, transform: 'translateY(0)' })),
+ transition('* => enterBottom', [style({ opacity: 0, transform: 'translateY(5%)' }), animate('100ms linear')]),
state(
'leave',
style({
diff --git a/components/core/config/config.ts b/components/core/config/config.ts
index aa3ad3aaad..7778d1dbc8 100644
--- a/components/core/config/config.ts
+++ b/components/core/config/config.ts
@@ -239,7 +239,7 @@ export interface ModalConfig {
export interface NotificationConfig extends MessageConfig {
nzTop?: string | number;
nzBottom?: string | number;
- nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+ nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
}
export interface PageHeaderConfig {
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 37005f1dbb..d5e319a4f5 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -7,8 +7,8 @@ title:
## zh-CN
-通知从右上角、右下角、左下角、左上角弹出。
+通知从右上角、右下角、左下角、左上角、上方、下方弹出。
## en-US
-A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
+A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft` or `top` or `bottom`.
diff --git a/components/notification/demo/placement.ts b/components/notification/demo/placement.ts
index 90602d38d3..764154427d 100644
--- a/components/notification/demo/placement.ts
+++ b/components/notification/demo/placement.ts
@@ -5,6 +5,15 @@ import { NzNotificationPlacement, NzNotificationService } from 'ng-zorro-antd/no
@Component({
selector: 'nz-demo-notification-placement',
template: `
+
+
+