From 930ae51d45d211adedf348e5cb57ee9d7c0d075a Mon Sep 17 00:00:00 2001
From: lo56ve <1046866318@qq.com>
Date: Tue, 21 Dec 2021 11:33:41 +0800
Subject: [PATCH] fix(comp:message/notification): fix first animation

fix #576
---
 packages/components/message/src/MessageProvider.tsx  |  1 +
 .../notification/src/NotificationProvider.tsx        | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/message/src/MessageProvider.tsx b/packages/components/message/src/MessageProvider.tsx
index dac9987f2..0e0427cc2 100644
--- a/packages/components/message/src/MessageProvider.tsx
+++ b/packages/components/message/src/MessageProvider.tsx
@@ -58,6 +58,7 @@ export default defineComponent({
           <CdkPortal target={target.value} load={loadContainer.value}>
             <TransitionGroup
               tag="div"
+              appear
               name={`${common.prefixCls}-move-up`}
               class={`${mergedPrefixCls.value}-wrapper`}
               style={style.value}
diff --git a/packages/components/notification/src/NotificationProvider.tsx b/packages/components/notification/src/NotificationProvider.tsx
index 0f1e630d2..7f7d49c52 100644
--- a/packages/components/notification/src/NotificationProvider.tsx
+++ b/packages/components/notification/src/NotificationProvider.tsx
@@ -44,7 +44,7 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${commonCfg.prefixCls}-notification`)
     const config = useGlobalConfig('notification')
     const maxCount = computed(() => props.maxCount ?? config.maxCount)
-    const { notifications, open, info, success, warning, error, update, destroy, destroyAll } =
+    const { notifications, loadContainer, open, info, success, warning, error, update, destroy, destroyAll } =
       useNotification(maxCount)
     const apis = { open, info, success, warning, error, update, destroy, destroyAll }
     const placementNotifications = usePlacementNotifications(props, config, notifications)
@@ -72,6 +72,7 @@ export default defineComponent({
           <TransitionGroup
             key={placement}
             tag="div"
+            appear
             name={moveName}
             class={[`${mergedPrefixCls.value}-wrapper`, `${mergedPrefixCls.value}-wrapper-${placement}`]}
             style={position}
@@ -84,7 +85,7 @@ export default defineComponent({
       return (
         <>
           {slots.default?.()}
-          <CdkPortal target={target.value} load={true}>
+          <CdkPortal target={target.value} load={loadContainer.value}>
             {placementGroup}
           </CdkPortal>
         </>
@@ -165,6 +166,8 @@ function useNotification(maxCount: ComputedRef<number>) {
     notifications.value = []
   }
 
+  const loadContainer = ref(false)
+
   const open = (options: NotificationOptions): NotificationRef => {
     const key = add(options)
     const ref = {
@@ -172,6 +175,9 @@ function useNotification(maxCount: ComputedRef<number>) {
       update: (options: Partial<NotificationOptions>) => update(key, options),
       destroy: () => destroy(key),
     }
+    if (!loadContainer.value) {
+      loadContainer.value = true
+    }
     return ref
   }
 
@@ -179,7 +185,7 @@ function useNotification(maxCount: ComputedRef<number>) {
     type => (options: Omit<NotificationOptions, 'type'>) => open({ ...options, type }),
   )
 
-  return { notifications, open, info, success, warning, error, update, destroy, destroyAll }
+  return { notifications, loadContainer, open, info, success, warning, error, update, destroy, destroyAll }
 }
 
 function getGroupPosition(