diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index 866b744c03c9ed21d9f270eb8462f1b8be433f67..504037c0f918cb24e11f718434d084d363ab064e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -27,20 +27,14 @@ struct SharedTransitionExample {
   @State active: boolean = false
 
   build() {
-    List() {
-      ListItem() {
-        Row() {
-          Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) {
-            Image($r('app.media.ic_health_heart')).width(50).height(50)
-              .sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 })
-          }.padding({ left: 10 })
-          .onClick(() => {
-            this.active = true
-          })
-
-          Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center)
-        }
-      }
+    Column() {
+      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
+        Image($r('app.media.ic_health_heart')).width(50).height(50)
+          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
+      }.padding({ left: 20, top: 20 })
+      .onClick(() => {
+        this.active = true
+      })
     }
   }
 }
@@ -50,14 +44,12 @@ struct SharedTransitionExample {
 // PageB.ets
 @Entry
 @Component
-struct BExample {
-
+struct pageBExample {
   build() {
     Stack() {
-      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')
-    }.width('100%').height(400)
+      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage')
+    }.width('100%').height('100%')
   }
 }
 ```
 
-![zh-cn_image_0000001219744195](figures/zh-cn_image_0000001219744195.gif)