增加显示隐藏动画

app/src/main/ets/pages/Index.ets

@@ -44,6 +44,9 @@ struct Index {
     ScreenUtil.getInstance().setPreferredOrientation(window.Orientation.AUTO_ROTATION);
   }
 
+  /**
+   * 页面的进入 退出动画 router时生效
+   */
   pageTransition() {
     // 定义页面进入时的效果，无论页面栈发生push还是pop操作均可生效
     PageTransitionEnter({ type: RouteType.None, duration: 100 }).opacity(1)
@@ -51,6 +54,10 @@ struct Index {
     PageTransitionExit({ type: RouteType.None, duration: 100 }).opacity(0)
   }
 
+  /**
+   * 拦截手势侧滑返回和标题栏的返回按钮, 增加弹窗提醒。
+   * @returns
+   */
   onBackPress(): boolean | void {
     // 弹出自定义的询问框
     promptAction.showDialog({
@@ -83,15 +90,11 @@ struct Index {
     return true;
   }
 
-  async onTitleBarLeftClick(_event: ClickEvent) {
-   this.onBackPress;
-  }
-
   build() {
     Column() {
       TitleBar({
         title: this.title,
-        onLeftClicked: ()=> {this.onBackPress()},
+        onLeftClicked: ()=> { this.onBackPress() },
         rightMenuType: TitleBarMenuType.None
       }).width('100%')
 
@@ -104,7 +107,9 @@ struct Index {
             router.pushUrl({url: "pages/layout/LinearLayoutPage"});
           });
 
-          Button().width(100).height('100%').type(ButtonType.Normal);
+          Button("Animation").width(100).height('100%').type(ButtonType.Normal).onClick(() =>{
+            router.pushUrl({url: "pages/animation/CompTransitionPage"});
+          });
 
         }.width('100%').height(48).justifyContent(FlexAlign.SpaceEvenly)
       }.justifyContent(FlexAlign.Center).width('100%')

app/src/main/ets/pages/animation/CompTransitionPage.ets

@@ -0,0 +1,44 @@
+import { CommonMediaName, CommonRes, TitleBar, TitleBarMenuType } from '@devwiki/common_ui/Index'
+import { curves, router } from '@kit.ArkUI';
+
+
+@Entry
+@Component
+struct CompTransitionPage {
+  @State isShow: boolean = true;
+  @State headHeight: string = '';
+  @State rightIcon: Resource = CommonRes.getIconEyeOff();
+
+  build() {
+    Column({ space: 8 }) {
+      TitleBar({
+        title: "CompTransitionPage",
+        titleTextAlign: TextAlign.Center,
+        onLeftClicked: () => {
+          router.back()
+        },
+        rightMenuType: TitleBarMenuType.Icon,
+        rightIcon: this.rightIcon,
+        onRightClicked: () => {
+          this.isShow = !this.isShow;
+          if (this.isShow) {
+            this.headHeight = ''
+            this.rightIcon = CommonRes.getIconEyeOff()
+          } else {
+            this.headHeight = '0%'
+            this.rightIcon = CommonRes.getIconEyeOn()
+          }
+        }
+      });
+      Column({ space: 8 }) {
+        Text("第1行");
+        Text("第2行");
+        Text("第3行");
+        Text("第4行");
+      }.width('100%').height(this.headHeight).backgroundColor('#8bc34a')
+      .animation({ curve: curves.springMotion() })
+
+      Column().height('100%').width('100%').borderWidth(1).borderColor('#ff5722')
+    }.height('100%').width('100%')
+  }
+}

app/src/main/resources/base/profile/main_pages.json

@@ -2,6 +2,7 @@
   "src": [
     "pages/Index",
     "pages/web/WebPage",
-    "pages/layout/LinearLayoutPage"
+    "pages/layout/LinearLayoutPage",
+    "pages/animation/CompTransitionPage"
   ]
 }