!2022 add new transition tests

Merge pull request !2022 from zhangchunyan/master

zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md

@@ -48,10 +48,8 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
 <div>
   <list>
     <list-item type="description">
-      <div>
-        <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
-        <text onclick="jump">Click on picture to Jump to ths details</text>
-      </div>
+      <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
+      <text onclick="jump">Click on picture to Jump to ths details</text>
     </list-item>
   </list>
 </div>
@@ -237,3 +235,145 @@ export default {
 
    b. back场景下：退出页面栈的Page2.js应用transition-enter描述的动画配置，并进行倒播；从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置，并进行倒播。
    ![zh-cn_image_0000001238184345](figures/zh-cn_image_0000001238184345.png)
+
+### 示例
+
+Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2中的盒子，会回退到Page1页面。
+
+1. Page1
+
+   ```
+   <!-- xxx.hml -->
+   <div class="container">
+       <text>index</text>
+       <div class="move_page" onclick="jump"></div>
+   </div>
+   ```
+
+   ```
+   <!-- xxx.js -->
+   import router from '@system.router';
+   export default {
+       data: {
+   
+       },
+       jump() {
+           router.push({
+               uri:'pages/transition2/transition2'
+           })
+       }
+   }
+   ```
+
+   ```
+   <!-- xxx.css -->
+   .container {
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       width: 100%;
+       height: 100%;
+   }
+   .move_page {
+       width: 100px;
+       height: 100px;
+       background-color: #72d3fa;
+       transition-enter: go_page;
+       transition-exit: exit_page;
+       transition-duration: 5s;
+       transition-timing-function: friction;
+   }
+   
+   @keyframes go_page {
+       from {
+           opacity: 0;
+           transform: translate(0px) rotate(60deg) scale(1.0);
+       }
+   
+       to {
+           opacity: 1;
+           transform: translate(100px) rotate(360deg) scale(1.0);
+       }
+   }
+   @keyframes exit_page {
+       from {
+           opacity: 1;
+           transform: translate(200px) rotate(60deg) scale(2);
+       }
+   
+       to {
+           opacity: 0;
+           transform: translate(200px) rotate(360deg) scale(2);
+       }
+   }
+   ```
+
+   
+
+2. Page2
+
+   ```
+   <!-- xxx.hml -->
+   <div class="container">
+       <text>transition</text>
+       <div class="move_page" onclick="jumpBack"></div>
+   </div
+   ```
+
+   ```
+   <!-- xxx.js -->
+   import router from '@system.router';
+   export default {
+       data: {
+   
+       },
+       jumpBack() {
+           router.back()
+       }
+   }
+   ```
+
+   ```
+   <!-- xxx.css -->
+   .container {
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       width: 100%;
+       height: 100%;
+   }
+   
+   .move_page {
+       width: 100px;
+       height: 100px;
+       background-color: #f172fa;
+       transition-enter: go_page;
+       transition-exit: exit_page;
+       transition-duration: 5s;
+       transition-timing-function: ease;
+   }
+   
+   @keyframes go_page {
+       from {
+           opacity: 0;
+           transform:translate(100px) rotate(0deg) scale(1.0);
+       }
+       to {
+           opacity: 1;
+           transform:translate(100px) rotate(180deg) scale(2.0);
+       }
+   }
+   
+   @keyframes exit_page {
+       from {
+           opacity: 1;
+           transform: translate(0px) rotate(60deg) scale(1);
+       }
+       to {
+           opacity: 0;
+           transform: translate(0px) rotate(360deg) scale(1);
+       }
+   }
+   ```
+   
+   ![transition](figures/transition.gif)