diff --git a/ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml
index bb16a840c1762f7ead83c8e33db5cdd2c92b5f41..70349442816f3dc612ff2fe16f9136dc839a90f7 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml
@@ -114,6 +114,15 @@
         <popup id="ifPropTrue" target="target1"
              if="true">
         </popup>
+        <popup id="ifPropFalse" target="target1"
+               if="false">
+        </popup>
+        <popup id="elifPropTrue" target="target1"
+               elif="true">
+        </popup>
+        <popup id="elifPropFalse" target="target1"
+               elif="false">
+        </popup>
 
         <text class="sub-title">
             渲染属性 -- show
@@ -127,6 +136,16 @@
         <popup id="showPropNone"  target="target1"
              show="">
         </popup>
+
+        <text class="sub-title">
+            特有属性 -- tid
+        </text>
+        <popup class="propNewAdd" target="target1"
+                 tid="id">
+        </popup>
+        <popup class="propNewAdd" target="target1"
+                 tid="">
+        </popup>
     </div>
 
     <div style="background-color: #000000; width: 2px; height: 100%;">
@@ -151,6 +170,16 @@
         </popup>
         <popup id="placementPropTop"  target="target1" placement="top">
         </popup>
+        <popup id="placementPropBottom"  target="target1" placement="bottom">
+        </popup>
+        <popup id="placementPropTopLeft"  target="target1" placement="topLeft">
+        </popup>
+        <popup id="placementPropTopRight"  target="target1" placement="topRight">
+        </popup>
+        <popup id="placementPropBottomLeft"  target="target1" placement="bottomLeft">
+        </popup>
+        <popup id="placementPropBottomRight"  target="target1" placement="bottomRight">
+        </popup>
 
         <text class="sub-title">
             特有属性 -- keepalive
diff --git a/ace/ace_standard/src/main/js/default/pages/popup/router/index.hml b/ace/ace_standard/src/main/js/default/pages/popup/router/index.hml
index 503f0d7a66dbb46a406506a1da20f6604684ba4d..754e9409c8d33fb9a4bfbca0b0dd9e2844cb00f7 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/router/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/popup/router/index.hml
@@ -381,6 +381,9 @@
         <text class="text">popupEvent-4</text>
     </popup>
 
+    <popup target="event1" onaccessibility="onAccessibility">
+    </popup>
+
     <popup id="func1"
            class="function1"
            ontouchstart="functionTest1"
diff --git a/ace/ace_standard/src/main/js/default/pages/popup/router/index.js b/ace/ace_standard/src/main/js/default/pages/popup/router/index.js
index 29267ffaf684c8b7dbfc46930c1e1313cbc525cf..3051cf20964114eb90394c8a11af180594edc254 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/router/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/popup/router/index.js
@@ -631,13 +631,13 @@ export default {
         prompt.showToast({
             message: 'reachBottom'
         });
-    }
-
-
-
-
-
-
+    },
 
+    onAccessibility(event) {
+        if (event.eventType == 1) {
+            console.log("onAccessibility" + event.eventType);
+        }
+        console.log("onAccessibility" + JSON.stringify(event));
+    }
 
 }
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/popup/style/index.css b/ace/ace_standard/src/main/js/default/pages/popup/style/index.css
index ba39c3f2177da5582ba781c103f5ad8d20bd542d..e9feb25ddcfd8d12d4d2c191f6a92e7cd2ebc96e 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/style/index.css
+++ b/ace/ace_standard/src/main/js/default/pages/popup/style/index.css
@@ -71,6 +71,7 @@
   border-top-right-radius: 0px;
   opacity: 0.5;
   align-self:flex-end;
+  transform: none;
 }
 
 #styleTwo{
@@ -86,6 +87,7 @@
   border-radius:5px;
   opacity: 1.5;
   align-self:flex-start;
+  transform: translateZ(5);
 }
 
 #styleThree{
@@ -99,6 +101,7 @@
   border-bottom:  2.5px dotted #fff000;
   opacity: 1;
   align-self:baseline;
+  transform: scale(1.2);
 }
 
 #styleFour{
@@ -106,6 +109,7 @@
   height: 20px;
   align-self:center;
   border: 2px solid #00ff00;
+  transform: scale3d(1.2,1.2,1.2);
 }
 
 #styleFive{
@@ -117,6 +121,7 @@
   border-image-width: 10px 5px 5px 10px;
   border-image-outset: 10px 5px 10px 5px;
   border-image-repeat: repeat;
+  transform: scaleX(1.2);
 }
 
 #styleSix{
@@ -131,6 +136,8 @@
   margin-top: 2%;
   margin-right: 1.5%;
   margin-bottom: 0.5%;
+  align-self: stretch;
+  transform: scaleY(1.5);
 }
 
 #styleSeven{
@@ -141,6 +148,7 @@
   margin-start: 1%;
   margin-end: 2%;
   background-color: #00ff00;
+  transform: scaleZ(1.5);
 }
 
 #styleEight{
@@ -149,12 +157,14 @@
   margin: 1%;
   padding: 2%;
   background-color: #0000ff;
+  transform: rotate3d(1.5,1.5,1.5,10);
 }
 
 #styleNine{
   width: 100%;
   height: 40px;
   display:flex;
+  transform: rotateX(20);
 }
 
 #styleFive{
@@ -166,6 +176,7 @@
   border-image-width: 10px 5px 5px 10px;
   border-image-outset: 10px 5px 10px 5px;
   border-image-repeat: repeat;
+  transform: rotateY(30);
 }
 
 #styleTen{
@@ -173,6 +184,7 @@
   height: 400%;
   display: none;
   background-color: #ff0000;
+  transform: rotateZ(5);
 }
 
 #styleEleven{
@@ -180,6 +192,7 @@
   background-color: #00ff00;
   flex:1 1 20px;
   z-index:10;
+  transform: skew(10,10);
 }
 
 #styleTwelve{
@@ -189,6 +202,7 @@
   flex-shrink: 3;
   flex-basis: 30px;
   z-index:13;
+  transform: skewX(10);
 }
 
 #styleThirteen{
@@ -199,6 +213,7 @@
   height: 10px;
   background-color: #00ff00;
   z-index:12;
+  transform: skewY(10);
 }
 
 #styleFourteen{
@@ -209,6 +224,7 @@
   height: 10px;
   background-color: #0000ff;
   z-index:3;
+  transform: perspective(20);
 }
 
 #styleFifteen{
@@ -219,6 +235,7 @@
   height: 10px;
   background-color: #fff000;
   z-index:5;
+  transform: translate3d(10,2,2);
 }
 
 #styleSixteen{
@@ -229,6 +246,7 @@
   height: 10px;
   background-color: #00ffff;
   z-index:15;
+  transform: translateY(5);
 }
 
 #styleSeventeen{
@@ -340,6 +358,7 @@
   background-size:10% 20%;
   background-repeat: repeat;
   background-position: 30% 40%;
+  mask-image: linear-gradient(to left, black, white);
 }
 
 #styleThirtyTwo{
@@ -511,3 +530,92 @@
   background-color: #fff000;
 }
 
+.ani-container{
+  flex-direction: column;
+  height: 100%;
+  flex-weight: 1;
+}
+
+.ani1{
+  color: #72ac33;
+  stroke-width: 55px;
+  line-cap: square;
+  margin: 5px;
+  transform-origin: 0% 0%;
+  animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+  from {
+    background-color: #f76160;
+    opacity:0.3;
+    width:50px;
+    height: 50px;
+    transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+    background-position:10% 10%
+  }
+  30% {
+    background-color: #60f761;
+    opacity:0.5;
+    width:70px;
+    height: 70px;
+    background-position:12% 12%;
+    transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+  }
+  to {
+    background-color: #6160f7;
+    opacity:1;
+    width:90px;
+    height: 90px;
+    background-position:22% 22%;
+    transform:rotate(180deg) scale(2)
+  }
+}
+
+
+.ani2{
+  color: #ad4e2a;
+  stroke-width: 55px;
+  line-cap: square;
+  margin: 5px;
+  transform-origin: 2% 3%;
+  animation-name:ani2Go;
+  animation-delay:5s;
+  animation-duration:10s;
+  animation-iteration-count:4;
+  animation-timing-function:ease-out;
+  animation-direction:reverse;
+  animation-fill-mode:forwards;
+  animation-play-state:running;
+  transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+  from {
+    background-color: #f76160;
+    opacity:0.3;
+    width:50px;
+    height: 50px;
+    background-position:10% 10%
+  }
+  30% {
+    background-color: #60f761;
+    opacity:0.5;
+    width:70px;
+    height: 70px;
+    background-position:12% 12%;
+    transform:translateX(10px) translateY(5px)  translateZ(15px)
+    rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+  }
+  to {
+    background-color: #6160f7;
+    opacity:1;
+    width:90px;
+    height: 90px;
+    background-position:22% 22%;
+    transform:translateX(30px) translateY(45px)  translateZ(55px)
+    rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+  }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/popup/style/index.hml b/ace/ace_standard/src/main/js/default/pages/popup/style/index.hml
index 5f72ac1c4635ce94cd1094b1e2ef76310957364f..738aed91d74ad1a6760a26ec936f12ee54a0c6f0 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/style/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/popup/style/index.hml
@@ -1,236 +1,136 @@
-<!--/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */-->
-
 <div class="container">
     <div class="style-container">
         <text class="title">
-            div通用样式
+            popup通用样式
         </text>
 
         <text class="sub-title">
             通用样式 1-8 \n width height padding margin border opacity align-self
         </text>
-        <div id="styleOne">
-        </div>
-        <div id="styleTwo">
-        </div>
-        <div id="styleThree">
-        </div>
-        <div id="styleFour">
-        </div>
-        <div id="styleFive">
-        </div>
-        <div id="styleSix">
-        </div>
-        <div id="styleSeven">
-        </div>
-        <div id="styleEight">
-        </div>
+        <popup id="styleOne" target="text1">
+        </popup>
+        <popup id="styleTwo" target="text1">
+        </popup>
+        <popup id="styleThree" target="text1">
+        </popup>
+        <popup id="styleFour" target="text1">
+        </popup>
+        <popup id="styleFive" target="text1">
+        </popup>
+        <popup id="styleSix" target="text1">
+        </popup>
+        <popup id="styleSeven" target="text1">
+        </popup>
+        <popup id="styleEight" target="text1">
+        </popup>
 
         <text class="sub-title">
             通用样式9-20 \n display flex z-index position
         </text>
         <div id="styleNine">
-            <div id="styleTen">
-            </div>
-            <div id="styleEleven">
-            </div>
-            <div id="styleTwelve">
-            </div>
-            <div id="styleThirteen">
-            </div>
-            <div id="styleFourteen">
-            </div>
-            <div id="styleFifteen">
-            </div>
-            <div id="styleSixteen">
-            </div>
-            <div id="styleSeventeen">
-            </div>
-            <div id="styleEighteen">
-            </div>
-            <div id="styleNineteen">
-            </div>
-            <div id="styleTwenty">
-            </div>
+            <popup id="styleTen" target="text1">
+            </popup>
+            <popup id="styleEleven" target="text1">
+            </popup>
+            <popup id="styleTwelve" target="text1">
+            </popup>
+            <popup id="styleThirteen" target="text1">
+            </popup>
+            <popup id="styleFourteen" target="text1">
+            </popup>
+            <popup id="styleFifteen" target="text1">
+            </popup>
+            <popup id="styleSixteen" target="text1">
+            </popup>
+            <popup id="styleSeventeen" target="text1">
+            </popup>
+            <popup id="styleEighteen" target="text1">
+            </popup>
+            <popup id="styleNineteen" target="text1">
+            </popup>
+            <popup id="styleTwenty" target="text1">
+            </popup>
         </div>
 
         <text class="sub-title">
             通用样式21-23 box-shadow
         </text>
         <div style="width: 100%;flex-direction: row;">
-            <div id="styleTwentyOne">
-            </div>
-            <div id="styleTwentyTwo">
-            </div>
-            <div id="styleTwentyThree">
-            </div>
+            <popup id="styleTwentyOne" target="text1">
+            </popup>
+            <popup id="styleTwentyTwo" target="text1">
+            </popup>
+            <popup id="styleTwentyThree" target="text1">
+            </popup>
         </div>
 
         <text class="sub-title">
             通用样式23-25 visibility clip-path
         </text>
-        <div id="styleTwentyFour">
-        </div>
-        <div id="styleTwentyFive">
-        </div>
+        <popup id="styleTwentyFour" target="text1">
+        </popup>
+        <popup id="styleTwentyFive" target="text1">
+        </popup>
 
         <text class="sub-title">
             通用样式26-31 background
         </text>
-        <div id="styleTwentySix">
-        </div>
-        <div id="styleTwentySeven">
-        </div>
-        <div id="styleTwentyNine">
-        </div>
-        <div id="styleThirty">
-        </div>
-        <div id="styleThirtyOne">
-        </div>
+        <popup id="styleTwentySix" target="text1">
+        </popup>
+        <popup id="styleTwentySeven" target="text1">
+        </popup>
+        <popup id="styleTwentyNine" target="text1">
+        </popup>
+        <popup id="styleThirty" target="text1">
+        </popup>
+        <popup id="styleThirtyOne"  target="text1">
+        </popup>
 
         <text class="sub-title">
             通用样式32 clip-path image-fill mask-image
         </text>
-        <div id="styleThirtyTwo">
-        </div>
+        <popup id="styleThirtyTwo" target="text1">
+        </popup>
     </div>
     <div style="background-color: #000000; width: 2px; height: 100%;">
     </div>
-    <div class="specific-container">
-        <text class="title">
-            div特有样式
-        </text>
+    <div class="ani-container">
 
-        <text class="sub-title">
-            特有样式 flex-direction flex-wrap justify-content align-items align-content
+        <text class="title">
+            动画样式
         </text>
-        <div id="specificOne">
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-        </div>
-        <div id="specificTwo">
-            <div id="specificThree" >
-                <div class="flex-item red-item">
-                </div>
-            </div>
-            <div id="specificFour" >
-                <div class="flex-item blue-item">
-                </div>
-
-            </div>
-            <div id="specificFive" >
-                <div class="flex-item yellow-item">
-                </div>
-                <div class="flex-item blue-item">
-                </div>
-            </div>
-            <div id="specificSix" >
-                <text style="font-size: 6px;">
-                    文本
-                </text>
-                <div class="flex-item blue-item">
-                </div>
-            </div>
-        </div>
 
-
-
-        <text class="sub-title">
-            特有样式 overflow scrollbar-color scrollbar-width overscroll-effect
+        <text id="textani1" class="sub-title">
+            popup动画样式1
         </text>
-        <div id="specificSeven" >
-            <div id="specificEight" >
-                <div style="margin-left:10px;width: 80px; height: 10px; background-color: #0000ff;"></div>
-            </div>
-        </div>
-        <div id="specificNine">
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-        </div>
-        <div id="specificTen">
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-        </div>
-        <div id="specificEleven">
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-            <div class="flex-item red-item">
-            </div>
-            <div class="flex-item blue-item">
-            </div>
-            <div class="flex-item green-item">
-            </div>
-        </div>
 
-        <text class="sub-title">
-            特有样式 grid
+        <text id="textani2" class="sub-title">
+            popup动画样式2
         </text>
-        <div id="specificTwelve">
-        </div>
-        <div id="specificThirteen">
-        </div>
-
-    <!--        <div id="specificEight" >-->
-<!--            <div class="flex-item yellow-item">-->
-<!--            </div>-->
-<!--            <div class="flex-item blue-item" style="width: 45%; align-content:flex-end;">-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <div id="specificNine" >-->
-<!--            <div class="flex-item yellow-item">-->
-<!--            </div>-->
-<!--            <div class="flex-item blue-item">-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <div id="specificTen" >-->
-<!--            <div class="flex-item yellow-item">-->
-<!--            </div>-->
-<!--            <div class="flex-item blue-item">-->
-<!--            </div>-->
-<!--        </div>-->
-
-
     </div>
+    <popup id="popupani1"
+           class="ani1"
+           target="textani1"
+           placement="top"
+           keepalive="true"
+           clickable="true"
+           arrowoffset="100px"
+           onvisibilitychange="visibilitychange"
+           onclick="hidepopupani1">
+        <text class="text">popupani-1</text>
+    </popup>
+
+    <popup id="popupani2"
+           class="ani2"
+           target="textani2"
+           placement="top"
+           keepalive="false"
+           clickable="true"
+           arrowoffset="100px"
+           onvisibilitychange="visibilitychange"
+           onclick="hidepopupani2">
+        <text class="text">popupani-2</text>
+    </popup>
+
 </div>
 
diff --git a/ace/ace_standard/src/main/js/default/pages/popup/style/index.js b/ace/ace_standard/src/main/js/default/pages/popup/style/index.js
index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..6e5c11cbf7b0bc76cf6c7ff0691d309315652834 100644
--- a/ace/ace_standard/src/main/js/default/pages/popup/style/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/popup/style/index.js
@@ -14,6 +14,10 @@
  */
 
 export default {
-
-
+    hidepopupani1() {
+        this.$element("popupani1").hide()
+    },
+    hidepopupani2() {
+        this.$element("popupani2").hide()
+    },
 }