diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js
index aff4aceee8b401cfe6263aaa1db03a0e94a1d718..fab0151d487b349e0bc1a5660c5786e552f05b69 100644
--- a/customappbar/interfaces/custom_app_bar.js
+++ b/customappbar/interfaces/custom_app_bar.js
@@ -706,20 +706,6 @@ export class CustomAppBar extends ViewPU {
     set labelName(newValue) {
         this.__labelName.set(newValue);
     }
-    aboutToAppear() {
-        if (this.isHalfScreen) {
-            this.contentBgColor = Color.Transparent;
-            this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
-            this.halfScreenShowAnimation();
-        }
-        else {
-            this.containerHeight = '100%';
-            this.containerWidth = '100%';
-        }
-        this.updateStringByResource();
-        this.getDeviceRadiusConfig();
-        this.subscribePrivacyState();
-    }
     aboutToDisappear() {
         this.smListener.off('change');
         this.mdListener.off('change');
@@ -1466,6 +1452,19 @@ export class CustomAppBar extends ViewPU {
             Stack.backgroundColor(ObservedObject.GetRawObject(this.contentBgColor));
             Stack.hitTestBehavior(HitTestMode.Transparent);
             Stack.id('AtomicServiceContainerId');
+            Stack.onAppear(() => {
+                if (this.isHalfScreen) {
+                    this.contentBgColor = Color.Transparent;
+                    this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
+                    this.halfScreenShowAnimation();
+                } else {
+                    this.containerHeight = '100%';
+                    this.containerWidth = '100%';
+                }
+                this.updateStringByResource();
+                this.getDeviceRadiusConfig();
+                this.subscribePrivacyState();
+            });
         }, Stack);
         this.observeComponentCreation2((elmtId, isInitialRender) => {
             If.create();
diff --git a/customappbar/source/custom_app_bar.ets b/customappbar/source/custom_app_bar.ets
index 01ebc729439fd33ab5ea91b6f85b39f026c94a1f..5b62f7e8ada237fdd5b71a509df01c707cf659a9 100644
--- a/customappbar/source/custom_app_bar.ets
+++ b/customappbar/source/custom_app_bar.ets
@@ -198,20 +198,6 @@ export struct CustomAppBar {
     events: ['usual.event.PRIVACY_STATE_CHANGED']
   };
 
-  aboutToAppear(): void {
-    if (this.isHalfScreen) {
-      this.contentBgColor = Color.Transparent;
-      this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
-      this.halfScreenShowAnimation();
-    } else {
-      this.containerHeight = '100%';
-      this.containerWidth = '100%';
-    }
-    this.updateStringByResource();
-    this.getDeviceRadiusConfig();
-    this.subscribePrivacyState();
-  }
-
   aboutToDisappear(): void {
     this.smListener.off('change');
     this.mdListener.off('change');
@@ -482,12 +468,12 @@ export struct CustomAppBar {
    * 半屏放大至全屏动效
    */
   expendContainerAnimation(): void {
+    this.isHalfToFullScreen = true;
     animateTo({
       duration: 150,
       curve: curves.interpolatingSpring(0, 1, 328, 36),
       onFinish: () => {
         this.contentBgColor = '#FFFFFF';
-        this.isHalfToFullScreen = true;
       }
     }, () => {
       this.containerWidth = '100%';
@@ -950,6 +936,19 @@ export struct CustomAppBar {
       .backgroundColor(this.contentBgColor)
       .hitTestBehavior(HitTestMode.Transparent)
       .id('AtomicServiceContainerId')
+      .onAppear(() => {
+        if (this.isHalfScreen) {
+          this.contentBgColor = Color.Transparent;
+          this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
+          this.halfScreenShowAnimation();
+        } else {
+          this.containerHeight = '100%';
+          this.containerWidth = '100%';
+        }
+        this.updateStringByResource();
+        this.getDeviceRadiusConfig();
+        this.subscribePrivacyState();
+      })
     }
     .height('100%')
     .width('100%')