revise doc

Signed-off-by: Nluoying_ace_admin <luoying19@huawei.com>

zh-cn/application-dev/ui/js-framework-syntax-css.md

@@ -100,7 +100,7 @@ div {
   color: #007dff;
 }
 /* 对class="container"的组件下的直接后代text设置样式 */
-.container > text {
+.container > text {
   color: #fa2a2d;
 }
 ```

zh-cn/application-dev/ui/ui-js-animate-attribute-style.md

@@ -26,8 +26,10 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
 }
-.fade{
+.fade {
   width: 30%;
   height: 200px;
   left: 35%;
@@ -35,13 +37,13 @@
   position: absolute;
   animation: 2s change infinite friction;
 }
-.bigger{
+.bigger {
   width: 20%;
   height: 100px;
   background-color: blue;
   animation: 2s change1 infinite linear-out-slow-in;
 }
-text{
+text {
   width: 100%;
   height: 100%;
   text-align: center;
@@ -61,7 +63,7 @@ text{
   }
 }
 /* 父组件大小变化 */
-@keyframes change1{
+@keyframes change1 {
   0% {
     width: 20%;
     height: 100px;
@@ -72,8 +74,8 @@ text{
   }
 }
 /* 子组件文字缩放 */
-@keyframes change2{
-  0%{
+@keyframes change2 {
+  0% {
     transform: scale(0);
   }
   100% {

zh-cn/application-dev/ui/ui-js-animate-component.md

@@ -83,6 +83,7 @@ export default {
   justify-content: center;
   align-items: center;
   width: 100%;
+  height: 100%;
 }
 .box{
   width: 200px;
@@ -103,7 +104,7 @@ export default {
   onInit() {
     this.options = {
       duration: 4000,
-    };
+    }
     this.keyframes = [
     {
       transform: {
@@ -127,11 +128,11 @@ export default {
           width: 300,
           height: 300   
       }    
-    ];
+    ]
   },
   Show() {
-    this.animation = this.$element('content').animate(this.keyframes, this.options);
-    this.animation.play();
+    this.animation = this.$element('content').animate(this.keyframes, this.options)
+    this.animation.play()
   }
 }
 ```
@@ -244,6 +245,8 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 button{
   width: 200px;
@@ -272,18 +275,15 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
     data: {
         animation: '',
     },
-  onInit() {
-  },
     onShow() {
         var options = {
             duration: 1500,
             easing:'ease-in',
-      elay:5,
+            delay:5,
             direction:'normal',
             iterations:2
         };
@@ -308,38 +308,30 @@ export default {
             }
         ];
         this.animation = this.$element('content').animate(frames, options);
-    this.animation.onstart = function(){
-      prompt.showToast({
-        message: "start"
-      });
-    };  //添加开始事件
-    this.animation.onrepeat = function(){
-      prompt.showToast({
-        message: " repeated"
-      });
-    };//添加重播事件
-    this.animation.oncancel = function(){
-      prompt.showToast({
-        message: "canceled"
-      });
-    };//添加取消事件
-    this.animation.onfinish = function(){
-      prompt.showToast({
-        message: "finish"
-      });
-    };//添加完成事件
+        this.animation.onstart = function() {
+            console.info('animation start')
+        }  // 添加开始事件
+        this.animation.onrepeat = function() {
+            console.info('animation repeated')
+        }  // 添加重播事件
+        this.animation.oncancel = function() {
+            console.info('animation canceled')
+        }   // 添加取消事件
+        this.animation.onfinish = function() {
+            console.info('animation finish')
+        }   // 添加完成事件
     },
     playAnimation() {
-    this.animation.play();//调用播放开始的方法
+        this.animation.play()  // 调用播放开始的方法
     },
     pauseAnimation() {
-    this.animation.pause();//调用播放暂停的方法
+        this.animation.pause()  // 调用播放暂停的方法
     },
     reverseAnimation() {
-    this.animation.reverse();//调用播放倒放的方法
+        this.animation.reverse()  // 调用播放倒放的方法
     },
     cancelAnimation() {
-    this.animation.cancel();//调用播放取消的方法
+        this.animation.cancel()  // 调用播放取消的方法
     }
 }
 ```

zh-cn/application-dev/ui/ui-js-animate-transform.md

@@ -202,22 +202,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
-.rect{
+.rect {
   width: 100px;
   height: 100px;
   animation: rotate 3s infinite;
   margin-left: 100px;
 }
-.rect1{
+.rect1 {
   background-color: #f76160;
 }
-.rect2{
+.rect2 {
   background-color: #60f76f;
   /* 改变原点位置*/
   transform-origin: 10% 10px;
 }
-.rect3{
+.rect3 {
   background-color: #6081f7;
   /*  改变原点位置*/
   transform-origin: right bottom;
@@ -231,7 +233,7 @@
   }
 }
 /* 3d示例样式 */
-.rotate3d{
+.rotate3d {
   margin-top: 150px;
   flex-direction: column;
   background-color:#F1F3F5;
@@ -242,27 +244,27 @@
   border-radius: 300px;
   border: 1px solid #ec0808;
 }
-.content{
+.content {
   padding-top: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 /* react4 react5 翻转形成眼睛 */
-.rect4{
+.rect4 {
   width: 100px;
   height: 100px;
   animation: rotate3d1 17ms infinite;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
-.rect5{
+.rect5 {
   width: 100px;
   height: 100px;
   animation: rotate3d1 17ms infinite;
   margin-left: 100px;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
-.mouse{
+.mouse {
   margin-top: 150px;
   width: 200px;
   height: 100px;
@@ -271,7 +273,7 @@
   animation: rotate3d2 17ms infinite;
 }
 /* 眼睛的动效 */
-@keyframes rotate3d1{
+@keyframes rotate3d1 {
   0% {
     transform:rotate3d(0,0,0,0deg)
   }
@@ -283,7 +285,7 @@
   }
 }
 /* 嘴的动效 */
-@keyframes rotate3d2{
+@keyframes rotate3d2 {
   0% {
     transform:rotate3d(0,0,0,0deg)
   }
@@ -435,6 +437,8 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
   background-color:#F1F3F5;
   display: flex;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 .rect{
   width: 100px;

zh-cn/application-dev/ui/ui-js-building-ui-animation.md

@@ -27,12 +27,14 @@
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
   flex-direction: column;
   align-items: center;
 }
 .translate {
   height: 150px;
   width: 300px;
+  margin: 50px;
   font-size: 50px;
   background-color: #008000;
   transform: translate(200px);
@@ -40,14 +42,16 @@
 .rotate {
   height: 150px;
   width: 300px;
+  margin: 50px;
   font-size: 50px;
   background-color: #008000;
   transform-origin: 200px 100px;
-  transform: rotateX(45deg);
+  transform: rotate(45deg);
 }
 .scale {
   height: 150px;
   width: 300px;
+  margin: 50px;
   font-size: 50px;
   background-color: #008000;
   transform: scaleX(1.5);
@@ -81,7 +85,6 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
 ```html
 <!-- xxx.hml -->
 <div class="item-container">
-  <text class="header">animation-name</text>
     <div class="item {{colorParam}}">
         <text class="txt">color</text>
     </div>
@@ -95,14 +98,11 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
 ```css
 /* xxx.css */
 .item-container {
-  margin-right: 60px;
-  margin-left: 60px;
+  margin: 60px;
   flex-direction: column;
 }
-.header {
-  margin-bottom: 20px;
-}
 .item {
+  width: 80%;
   background-color: #f76160;
 }
 .txt {
@@ -112,6 +112,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
 }
 .button {
   width: 200px;
+  margin: 10px;
   font-size: 30px;
   background-color: #09ba07;
 }
@@ -141,7 +142,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
 }
 ```
 
-```
+```js
 // xxx.js
 export default {
   data: {
@@ -153,7 +154,7 @@ export default {
     this.opacityParam = '';
     this.colorParam = 'color';
     this.opacityParam = 'opacity';
-  },
+  }
 }
 ```