docs: notificaiton blog (#45199)

* docs: notificaiton blog

* chore: update

* Update docs/blog/notification-stack.zh-CN.md

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>
Signed-off-by: MadCcc <1075746765@qq.com>

* chore: typo

* docs: add en

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>

docs/blog/notification-stack.en-US.md

@@ -0,0 +1,57 @@
+---
+title: Stacked Notification
+date: 2023-10-07
+author: MadCcc
+---
+
+### Stack
+
+In 5.10.0, we introduced a new feature to Notification, which allows eye-catching reminders that would otherwise fill the screen to be stacked together, bringing a touch of agility to the originally tense component:
+
+![Image](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZAFSQ60WMVEAAAAAAAAAAAAADrJ8AQ/original)
+
+We liked this new feature so much that we made it the default behavior for Notification after 5.10.0. This feature will bring about some changes in the look and feel. For example, the order of notifications in the expanded state changes from bottom-to-top to top-to-bottom. This is exactly the opposite of the previous default behavior, but it is the best under the new animation. order.
+
+Of course, users can pass `stack: false` to turn off this feature and return to the default behavior before 5.9.x. Please refer to our documentation for details.
+
+### Details
+
+In order to implement this feature, we have been coding for a long time, hoping to make all the details perfect. We can start with the demands.
+
+- The default trigger threshold for stacking is that **more than three** Notifications appear at the same time, which means that when the fourth Notification appears, the entire Notification group will be in a collapsed state. This threshold can be adjusted via `stack: { threshold: 3 }`.
+- There are **two** Notifications that are visible behind the folded state, and we added a frosted glass background to them to further dilute their existence. It is worth mentioning that we have also optimized this effect for dark mode. You can click button on the bottom-right to switch themes to give it a try.
+- All undisplayed Notifications do not disappear when collapsed. When you use the mouse to hover over the collapsed Notification group, all Notifications that have not been automatically closed will be expanded and arranged in order, and the duration of all Notifications will be refreshed.
+- The folding direction will be different under different `placement`, but it can only be divided into two types: upward or downward. The order of arrangement when expanded will also be from top to bottom or bottom to top.
+
+### Implementation
+
+#### Dynamic Height
+
+You may find that as the Notification height changes, the message hidden behind it is always posted below the latest message, and there will be no cross-border situations. Yes, in the collapsed state, all message boxes are limited to the same height as the latest message, which will bring several benefits:
+
+1. We don’t have to worry about the message behind being exceeded if the height of the latest message is too small;
+2. Just by giving a fixed offset, we can get the position and width of the two message boxes behind it, so as to get a smooth-looking animation effect.
+
+![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*GmNORZEAwiUAAAAAAAAAAAAADrJ8AQ/original)
+
+Of course, it doesn't end as long as the heights are directly equal. Don't forget that our Notification supports expansion. When expanded, all message boxes should be restored to their original size, and the offset when expanded is calculated from the original height.
+
+But the width and height have been modified, how do we restore it?
+
+In order to implement this new feature, we added a new layer of `div` outside the original message box as a container for the message box to bear the responsibility of size changes. The original message box only retains the content part to ensure that its height is not affected by the container. The width of the container is changed by `scaleX`, which avoids the situation where the width change causes the text to wrap to increase the height of the container. Under this layer of structure, we can not only get the correct content size, but also modify the size of the container at will without affecting the layout of the content, killing two birds with one stone.
+
+![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1cZGRKgxucsAAAAAAAAAAAAADrJ8AQ/original)
+
+#### Positioning
+
+In terms of positioning, we chose the simplest method, absolutely positioning all message boxes. When expanding, we calculate the height of each message box and accumulate its positioning offsets to achieve the current smooth animation effect.
+
+If animation effects are not considered, there are other layout methods. For example, during the implementation process, we used flex layout to implement the order of expansion first, and then used negative `margin` to achieve the stacking effect. This is also an idea, but in fact there will be some problems with the animation effect: when a new message appears, all the messages below will have an instant displacement to make way for the new message. This problem and some other positioning problems will be merged together and ultimately difficult to solve perfectly, so we finally adopted the simplest method - absolute positioning, and all offsets were calculated manually.
+
+### 总结
+
+This new feature is an attempt by the antd team to improve the flexibility and fashion of components. We hope to bring you a better experience~
+
+Because it is a new feature, if you encounter usage problems or bugs, please feel free to send an issue.
+
+Finally, I hope you all like this smart Notification~

docs/blog/notification-stack.zh-CN.md

@@ -0,0 +1,45 @@
+---
+title: 灵动的 Notification
+date: 2023-10-07
+author: MadCcc
+---
+
+### 堆叠
+
+在 5.10.0 中，我们为 Notification 组件引入了一个新的特性，让原本会堆满屏幕的的醒目提醒堆叠到了一起，让原本紧张感满满的组件迎来了一丝灵动：
+
+![Image](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZAFSQ60WMVEAAAAAAAAAAAAADrJ8AQ/original)
+
+我们非常喜欢这个新特性，所以在 5.10.0 之后我们把它作为了 Notification 的默认行为。这个特性会带来一些观感上的改变，比如在展开状态下消息的展示顺序变为了从上到下为从新到旧，这与之前的默认行为恰好相反，但却是新的动画下的最佳顺序。<br />当然，用户可以通过 `stack: false` 来关闭这个特性并回到 5.9.x 之前的默认行为，详细请参考我们的文档。
+
+### 特性细节
+
+为了实现这个功能，我们调试了很久，希望把所有细节都做的尽善尽美。我们可以从一些堆叠特性的需求开始说起。
+
+- 堆叠的默认触发阈值是**三个以上**的 Notification 同时出现，也就是说当第四个 Notification 出现时，整个 Notification 组就会呈现收起的状态。这个阈值可以通过 `stack: { threshold: 3 }` 来调整。
+- 收起状态时藏在背后可见的 Notification 是**两个**，并且我们为其增加了毛玻璃背景，更加淡化他们的存在。值得一提的是我们同样为暗色模式优化了这个效果，大家可以点击右下角切换主题来试一试。
+- 收起时所有未被展示的 Notification 并没有消失，使用鼠标悬浮在收起的 Notification 组上时，会使所有没有自动关闭的 Notification 展开并按顺序排列，同时所有 Notificaiton 的持续时间将会刷新。
+- 在不同的 `placement` 下收起的方向会有差异，但仅会分为两种：向上或者向下。展开时的排列顺序也会是从上到下或者从下到上两种顺序。
+
+### 实现细节
+
+#### 动态高度
+
+细心的你可能发现了，随着 Notification 高度的变化，背后隐藏的消息一直都是贴着最新的消息下方的，不会有越界的情况出现。是的，在收起状态下，所有的消息框都被限制与最新的消息等高，这会带来几个好处：
+
+1. 我们不用担心在新消息高度太小时背后的消息有超出的情况；
+2. 只需要给定一个固定的偏移量，我们就可以得出背后两个消息框的位置与宽度，从而得到一个看起来很顺畅的动画效果。
+
+![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*GmNORZEAwiUAAAAAAAAAAAAADrJ8AQ/original)
+
+当然也不是只要将高度直接相等就结束了，别忘了我们的 Notification 是支持展开的，在展开时所有的消息框都应该恢复到他原本的大小，并且由原本的高度来计算展开时的偏移量。但是宽高都已经被修改了，我们需要如何还原呢？为了实现这个新特性，我们在原本的消息框外层新增了一层 div，作为消息框的容器，来承担尺寸变化的职责。而原本的消息框则只保留了内容部分，保证自身的高度不受容器的影响。而宽度则是容器由 `scaleX` 来变化，这就避免了宽度变化导致文字换行撑高容器高度的情况。在这层结构下，我们既能得到正确的内容尺寸，又可以随意修改容器的尺寸，而不影响内容的排版，一举两得。
+
+![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1cZGRKgxucsAAAAAAAAAAAAADrJ8AQ/original)
+
+#### 定位方法
+
+在定位上我们选择了最简单的方法，将所有消息框都绝对定位，展开时则是计算每一个消息框的高度，将其定位偏移量累积起来，达到目前这样流畅的动画效果。如果不考虑动画效果的话还会有其他的布局方法。比如在实现过程中我们就采用过 flex 布局，将展开时的顺序排列先实现好，然后再通过负的 `margin` 来实现堆叠效果。这同样是一种思路，但实际上会有一些动画效果上的问题：在新的消息出现时，所有下方的消息都会有一个瞬间的位移来给新消息让位。这个问题和一些其他的定位问题会融合到一起最后比较难完美解决，所以我们最终还是采用了最简单的方式——绝对定位，所有的偏移量都由我们手动计算。
+
+### 总结
+
+这个新特性是 antd 团队为了提升组件的灵活度与时髦度的一次尝试，希望能够带给大家更好的体验～同样因为是新的特性，如果有遇到使用问题或者 Bug 的话欢迎到 antd 的 issue 区提出。最后希望大家喜欢这个灵动的 Notification～