!11310 示例代码修改1108

Merge pull request !11310 from luoying_ace/ly1024

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;
@@ -70,11 +72,11 @@ text{
     width: 80%;
     height: 200px;
   }
-}  
+}
 /* 子组件文字缩放 */
-@keyframes change2{
-  0%{
-   transform: scale(0);
+@keyframes change2 {
+  0% {
+    transform: scale(0);
   }
   100% {
     transform: scale(1.5);

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()
   }
 }
 ```
@@ -225,16 +226,16 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
 ```html
 <!-- xxx.hml -->
 <div class="container">
- <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
- </div>
-   <div class="row">
-      <button type="capsule" value="play" onclick="playAnimation"></button>
-      <button type="capsule" value="pause" onclick="pauseAnimation"></button>
-   </div>
-   <div class="row1">
-      <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
-      <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
-   </div>
+    <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
+    </div>
+    <div class="row">
+        <button type="capsule" value="play" onclick="playAnimation"></button>
+        <button type="capsule" value="pause" onclick="pauseAnimation"></button>
+    </div>
+    <div class="row1">
+        <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
+        <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
+    </div>
 </div>
 ```
 
@@ -244,6 +245,8 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 button{
   width: 200px;
@@ -272,75 +275,64 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
-  data: {
-    animation: '',
-  },
-  onInit() {
-  },
-  onShow() {
-    var options = {
-      duration: 1500,
-      easing:'ease-in',
-      elay:5,
-      direction:'normal',
-      iterations:2
-    };
-    var frames = [
-      {
-        transform: {
-          translate: '-150px -0px'
-        },
-        opacity: 0.1,
-        offset: 0.0,
-        width: 200,
-        height: 200,
-      },
-      {
-        transform: {
-          translate: '150px 0px'
-        },
-        opacity: 1.0,
-        offset: 1.0,
-        width: 300,
-        height: 300,
-      }
-    ];
-    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"
-      });
-    };//添加完成事件
-  },
-  playAnimation() {
-    this.animation.play();//调用播放开始的方法
-  },
-  pauseAnimation() {
-    this.animation.pause();//调用播放暂停的方法
-  },
-  reverseAnimation() {
-    this.animation.reverse();//调用播放倒放的方法
-  },
-  cancelAnimation() {
-    this.animation.cancel();//调用播放取消的方法
-  }
+    data: {
+        animation: '',
+    },
+    onShow() {
+        var options = {
+            duration: 1500,
+            easing:'ease-in',
+            delay:5,
+            direction:'normal',
+            iterations:2
+        };
+        var frames = [
+            {
+                transform: {
+                    translate: '-150px -0px'
+                },
+                opacity: 0.1,
+                offset: 0.0,
+                width: 200,
+                height: 200,
+            },
+            {
+                transform: {
+                    translate: '150px 0px'
+                },
+                opacity: 1.0,
+                offset: 1.0,
+                width: 300,
+                height: 300,
+            }
+        ];
+        this.animation = this.$element('content').animate(frames, options);
+        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()  // 调用播放开始的方法
+    },
+    pauseAnimation() {
+        this.animation.pause()  // 调用播放暂停的方法
+    },
+    reverseAnimation() {
+        this.animation.reverse()  // 调用播放倒放的方法
+    },
+    cancelAnimation() {
+        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,28 +85,24 @@ 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>
-  <div class="item {{opacityParam}}">
-    <text class="txt">opacity</text>
-  </div>
-  <input class="button" type="button" name="" value="show" onclick="showAnimation"/>
+    <div class="item {{colorParam}}">
+        <text class="txt">color</text>
+    </div>
+    <div class="item {{opacityParam}}">
+        <text class="txt">opacity</text>
+    </div>
+    <input class="button" type="button" name="" value="show" onclick="showAnimation"/>
 </div>
 ```
 
 ```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';
-  },
+  }
 }
 ```