1# 转场样式<a name="ZH-CN_TOPIC_0000001209210695"></a> 2 3## 共享元素转场<a name="zh-cn_topic_0000001127125110_section1884520391817"></a> 4 5**表 1** 共享元素转场属性 6 7<a name="zh-cn_topic_0000001127125110_table74342031134012"></a> 8<table><thead align="left"><tr id="zh-cn_topic_0000001127125110_row16523131144020"><th class="cellrowborder" valign="top" width="15.370000000000001%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001127125110_p1752416310408"><a name="zh-cn_topic_0000001127125110_p1752416310408"></a><a name="zh-cn_topic_0000001127125110_p1752416310408"></a>名称</p> 9</th> 10<th class="cellrowborder" valign="top" width="12.920000000000002%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001127125110_p552423110408"><a name="zh-cn_topic_0000001127125110_p552423110408"></a><a name="zh-cn_topic_0000001127125110_p552423110408"></a>类型</p> 11</th> 12<th class="cellrowborder" valign="top" width="16.41%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001127125110_p18524103164010"><a name="zh-cn_topic_0000001127125110_p18524103164010"></a><a name="zh-cn_topic_0000001127125110_p18524103164010"></a>默认值</p> 13</th> 14<th class="cellrowborder" valign="top" width="55.300000000000004%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001127125110_p85241931154019"><a name="zh-cn_topic_0000001127125110_p85241931154019"></a><a name="zh-cn_topic_0000001127125110_p85241931154019"></a>描述</p> 15</th> 16</tr> 17</thead> 18<tbody><tr id="zh-cn_topic_0000001127125110_row5524631174014"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p452483174010"><a name="zh-cn_topic_0000001127125110_p452483174010"></a><a name="zh-cn_topic_0000001127125110_p452483174010"></a>shareid</p> 19</td> 20<td class="cellrowborder" valign="top" width="12.920000000000002%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p3524143118404"><a name="zh-cn_topic_0000001127125110_p3524143118404"></a><a name="zh-cn_topic_0000001127125110_p3524143118404"></a>string</p> 21</td> 22<td class="cellrowborder" valign="top" width="16.41%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p2524431164017"><a name="zh-cn_topic_0000001127125110_p2524431164017"></a><a name="zh-cn_topic_0000001127125110_p2524431164017"></a>无</p> 23</td> 24<td class="cellrowborder" valign="top" width="55.300000000000004%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p135243315406"><a name="zh-cn_topic_0000001127125110_p135243315406"></a><a name="zh-cn_topic_0000001127125110_p135243315406"></a>进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。</p> 25</td> 26</tr> 27</tbody> 28</table> 29 30**表 2** 共享元素转场样式 31 32<a name="zh-cn_topic_0000001127125110_t8a80feb634c14ee59413c6f7c9fed858"></a> 33<table><thead align="left"><tr id="zh-cn_topic_0000001127125110_rc8f205abe50c4069b741f1d3085b82bb"><th class="cellrowborder" valign="top" width="26.780000000000005%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001127125110_a6da2878dff98420d811406562c90f38e"><a name="zh-cn_topic_0000001127125110_a6da2878dff98420d811406562c90f38e"></a><a name="zh-cn_topic_0000001127125110_a6da2878dff98420d811406562c90f38e"></a>名称</p> 34</th> 35<th class="cellrowborder" valign="top" width="15.480000000000002%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001127125110_a3e96e3cd29684dd59c65defd1d8e7f89"><a name="zh-cn_topic_0000001127125110_a3e96e3cd29684dd59c65defd1d8e7f89"></a><a name="zh-cn_topic_0000001127125110_a3e96e3cd29684dd59c65defd1d8e7f89"></a>类型</p> 36</th> 37<th class="cellrowborder" valign="top" width="15.480000000000002%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001127125110_a1f58fb2c54054fd980aab5656afa864c"><a name="zh-cn_topic_0000001127125110_a1f58fb2c54054fd980aab5656afa864c"></a><a name="zh-cn_topic_0000001127125110_a1f58fb2c54054fd980aab5656afa864c"></a>默认值</p> 38</th> 39<th class="cellrowborder" valign="top" width="42.260000000000005%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001127125110_a03f3c47f058d4a26bb5b19a5b7468ac8"><a name="zh-cn_topic_0000001127125110_a03f3c47f058d4a26bb5b19a5b7468ac8"></a><a name="zh-cn_topic_0000001127125110_a03f3c47f058d4a26bb5b19a5b7468ac8"></a>描述</p> 40</th> 41</tr> 42</thead> 43<tbody><tr id="zh-cn_topic_0000001127125110_rd2368edf2c9e438c88e941389eb4f0ea"><td class="cellrowborder" valign="top" width="26.780000000000005%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p874892402117"><a name="zh-cn_topic_0000001127125110_p874892402117"></a><a name="zh-cn_topic_0000001127125110_p874892402117"></a>shared-transition-effect</p> 44</td> 45<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_ab1c301abb41c4c21867fd512f37311e9"><a name="zh-cn_topic_0000001127125110_ab1c301abb41c4c21867fd512f37311e9"></a><a name="zh-cn_topic_0000001127125110_ab1c301abb41c4c21867fd512f37311e9"></a>string</p> 46</td> 47<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_ab2ca6af17390483ea2a1b24486cdce9e"><a name="zh-cn_topic_0000001127125110_ab2ca6af17390483ea2a1b24486cdce9e"></a><a name="zh-cn_topic_0000001127125110_ab2ca6af17390483ea2a1b24486cdce9e"></a>exchange</p> 48</td> 49<td class="cellrowborder" valign="top" width="42.260000000000005%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p1599914412216"><a name="zh-cn_topic_0000001127125110_p1599914412216"></a><a name="zh-cn_topic_0000001127125110_p1599914412216"></a>配置共享元素转场时的入场样式。</p> 50<p id="zh-cn_topic_0000001127125110_p12999641122118"><a name="zh-cn_topic_0000001127125110_p12999641122118"></a><a name="zh-cn_topic_0000001127125110_p12999641122118"></a>当前支持：exchange或static，默认为exchange。</p> 51<p id="zh-cn_topic_0000001127125110_p10999194192114"><a name="zh-cn_topic_0000001127125110_p10999194192114"></a><a name="zh-cn_topic_0000001127125110_p10999194192114"></a>转场时，目的页配置的样式优先生效。</p> 52<a name="zh-cn_topic_0000001127125110_ul1231001135311"></a><a name="zh-cn_topic_0000001127125110_ul1231001135311"></a><ul id="zh-cn_topic_0000001127125110_ul1231001135311"><li>exchange表示源页面元素移动到目的页元素位置，并进行适当缩放。</li><li>static表示目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。</li></ul> 53</td> 54</tr> 55<tr id="zh-cn_topic_0000001127125110_row2544647142116"><td class="cellrowborder" valign="top" width="26.780000000000005%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p254415477214"><a name="zh-cn_topic_0000001127125110_p254415477214"></a><a name="zh-cn_topic_0000001127125110_p254415477214"></a>shared-transition-name</p> 56</td> 57<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p454484719213"><a name="zh-cn_topic_0000001127125110_p454484719213"></a><a name="zh-cn_topic_0000001127125110_p454484719213"></a>string</p> 58</td> 59<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p1544204722119"><a name="zh-cn_topic_0000001127125110_p1544204722119"></a><a name="zh-cn_topic_0000001127125110_p1544204722119"></a>-</p> 60</td> 61<td class="cellrowborder" valign="top" width="42.260000000000005%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p45835515223"><a name="zh-cn_topic_0000001127125110_p45835515223"></a><a name="zh-cn_topic_0000001127125110_p45835515223"></a>转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。</p> 62</td> 63</tr> 64<tr id="zh-cn_topic_0000001127125110_row642791311221"><td class="cellrowborder" valign="top" width="26.780000000000005%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p34274132224"><a name="zh-cn_topic_0000001127125110_p34274132224"></a><a name="zh-cn_topic_0000001127125110_p34274132224"></a>shared-transition-timing-function</p> 65</td> 66<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p1342771362219"><a name="zh-cn_topic_0000001127125110_p1342771362219"></a><a name="zh-cn_topic_0000001127125110_p1342771362219"></a>string</p> 67</td> 68<td class="cellrowborder" valign="top" width="15.480000000000002%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p8427101342213"><a name="zh-cn_topic_0000001127125110_p8427101342213"></a><a name="zh-cn_topic_0000001127125110_p8427101342213"></a>friction</p> 69</td> 70<td class="cellrowborder" valign="top" width="42.260000000000005%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p1979164818229"><a name="zh-cn_topic_0000001127125110_p1979164818229"></a><a name="zh-cn_topic_0000001127125110_p1979164818229"></a>转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。</p> 71</td> 72</tr> 73</tbody> 74</table> 75 76## 共享元素注意事项<a name="zh-cn_topic_0000001127125110_section91806261439"></a> 77 781. 若同时配置了共享元素转场和自定义页面转场样式，页面转场效果以自定义效果为准； 79 802. 共享元素的exchange效果类似下图： 81 82**图 1** 共享元素转场默认效果<a name="zh-cn_topic_0000001127125110_fig69431331672"></a> 83 84 853. 共享元素动画对元素的边框、背景色不生效。 86 874. 共享元素转场时，由于页面元素会被隐藏，故页面元素配置的动画样式/动画方法失效。 88 895. 动态修改shareid：组件A的shareid被组件B的shareid覆盖，则组件A的共享元素效果失效，即使组件B的shareid被修改，此时组件A的共享元素效果也不会恢复。<sup>5+</sup> 90 91## 共享元素示例代码<a name="zh-cn_topic_0000001127125110_section1568117161452"></a> 92 93PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 94 95``` 96<!-- PageA --> 97<!-- xxx.hml --> 98<div> 99 <list> 100 <list-item type="description"> 101 <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image> 102 <text onclick="jump">Click on picture to Jump to ths details</text> 103 </list-item> 104 </list> 105</div> 106``` 107 108``` 109// xxx.js 110import router from '@system.router'; 111export default { 112 jump() { 113 router.push({ 114 uri: 'detailpage', 115 }); 116 }, 117} 118``` 119 120``` 121/* xxx.css */ 122.shared-transition-style { 123 shared-transition-effect: exchange; 124 shared-transition-name: shared-transition; 125} 126@keyframes shared-transition { 127 from { opacity: 0; } 128 to { opacity: 1; } 129} 130``` 131 132``` 133<!-- PageB --> 134<!-- xxx.hml --> 135<div> 136 <image src="itemDetail.jpg" shareid="shareImage" onclick="jumpBack" class="shared-transition-style"></image> 137</div> 138``` 139 140``` 141// xxx.js 142import router from '@system.router'; 143export default { 144 jumpBack() { 145 router.back(); 146 }, 147} 148``` 149 150``` 151/* xxx.css */ 152.shared-transition-style { 153 shared-transition-effect: exchange; 154 shared-transition-name: shared-transition; 155} 156@keyframes shared-transition { 157 from { opacity: 0; } 158 to { opacity: 1; } 159} 160``` 161 162## 卡片转场样式<a name="zh-cn_topic_0000001127125110_section765051220203"></a> 163 164<a name="zh-cn_topic_0000001127125110_table14211104092012"></a> 165<table><thead align="left"><tr id="zh-cn_topic_0000001127125110_row112112406202"><th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125110_p62118408204"><a name="zh-cn_topic_0000001127125110_p62118408204"></a><a name="zh-cn_topic_0000001127125110_p62118408204"></a>名称</p> 166</th> 167<th class="cellrowborder" valign="top" width="13.969999999999999%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125110_p19211144052019"><a name="zh-cn_topic_0000001127125110_p19211144052019"></a><a name="zh-cn_topic_0000001127125110_p19211144052019"></a>类型</p> 168</th> 169<th class="cellrowborder" valign="top" width="28.410000000000004%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125110_p6211134012207"><a name="zh-cn_topic_0000001127125110_p6211134012207"></a><a name="zh-cn_topic_0000001127125110_p6211134012207"></a>默认值</p> 170</th> 171<th class="cellrowborder" valign="top" width="32.62%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125110_p10211144052012"><a name="zh-cn_topic_0000001127125110_p10211144052012"></a><a name="zh-cn_topic_0000001127125110_p10211144052012"></a>描述</p> 172</th> 173</tr> 174</thead> 175<tbody><tr id="zh-cn_topic_0000001127125110_row1821274092016"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125110_p20212740102017"><a name="zh-cn_topic_0000001127125110_p20212740102017"></a><a name="zh-cn_topic_0000001127125110_p20212740102017"></a>transition-effect</p> 176</td> 177<td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125110_p1721219403209"><a name="zh-cn_topic_0000001127125110_p1721219403209"></a><a name="zh-cn_topic_0000001127125110_p1721219403209"></a>string</p> 178</td> 179<td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125110_p42121340102014"><a name="zh-cn_topic_0000001127125110_p42121340102014"></a><a name="zh-cn_topic_0000001127125110_p42121340102014"></a>-</p> 180</td> 181<td class="cellrowborder" valign="top" width="32.62%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125110_p721204092018"><a name="zh-cn_topic_0000001127125110_p721204092018"></a><a name="zh-cn_topic_0000001127125110_p721204092018"></a>用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：</p> 182<a name="zh-cn_topic_0000001127125110_ul2107101914291"></a><a name="zh-cn_topic_0000001127125110_ul2107101914291"></a><ul id="zh-cn_topic_0000001127125110_ul2107101914291"><li>unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。</li><li>none：转场过程中没有动效。</li></ul> 183</td> 184</tr> 185</tbody> 186</table> 187 188> **说明：** 189>卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 190 191## 示例<a name="zh-cn_topic_0000001127125110_section814213323271"></a> 192 193source\_page包含顶部内容以及卡片列表，点击卡片可以跳转到target\_page。 194 195``` 196<!-- source_page --> 197<!-- xxx.hml --> 198<div class="container"> 199 <div class="outer"> 200 <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text> 201 </div> 202 <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center"> 203 <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" 204 onclick="jumpPage({{$item.id}}, {{$item.uri}})"> 205 <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text> 206 </list-item> 207 </list> 208</div> 209``` 210 211``` 212// xxx.js 213import router from '@system.router' 214export default { 215 data: { list: [] }, 216 onInit() { 217 for(var i = 0; i < 10; i++) { 218 var item = { uri: "pages/card_transition/target_page/index", 219 title: "this is title" + i, id: "item_" + i } 220 this.list.push(item); 221 } 222 }, 223 jumpPage(id, uri) { 224 var cardId = this.$element(id).ref; 225 router.push({ uri: uri, params : { ref : cardId } }); 226 } 227} 228``` 229 230``` 231/* xxx.css */ 232.container { 233 flex-direction: column; 234 align-items: center; 235 background-color: #ABDAFF; 236} 237.item { 238 height: 80px; 239 background-color: #FAFAFA; 240 margin-top: 2px; 241} 242.outer { 243 width: 300px; 244 height: 100px; 245 align-items: flex-end; 246 transition-effect: unfold; 247} 248``` 249 250``` 251<!-- target_page --> 252<!-- xxx.hml --> 253<div class="container"> 254 <div class="div"> 255 <text style="font-size: 30px">this is detail</text> 256 </div> 257</div> 258``` 259 260``` 261/* xxx.css */ 262.container { 263 flex-direction: column; 264 align-items: center; 265 background-color: #EBFFD7; 266} 267.div { 268 height: 600px; 269 flex-direction: column; 270 align-items: center; 271 justify-content: center; 272} 273``` 274 275 276 277## 页面转场样式<a name="zh-cn_topic_0000001127125110_section0565021620"></a> 278 279**表 3** 页面转场样式 280 281<a name="zh-cn_topic_0000001127125110_table486753518541"></a> 282<table><thead align="left"><tr id="zh-cn_topic_0000001127125110_row0935835125411"><th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001127125110_p1893512352542"><a name="zh-cn_topic_0000001127125110_p1893512352542"></a><a name="zh-cn_topic_0000001127125110_p1893512352542"></a>名称</p> 283</th> 284<th class="cellrowborder" valign="top" width="13.969999999999999%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001127125110_p693503525419"><a name="zh-cn_topic_0000001127125110_p693503525419"></a><a name="zh-cn_topic_0000001127125110_p693503525419"></a>类型</p> 285</th> 286<th class="cellrowborder" valign="top" width="28.410000000000004%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001127125110_p1493523565414"><a name="zh-cn_topic_0000001127125110_p1493523565414"></a><a name="zh-cn_topic_0000001127125110_p1493523565414"></a>默认值</p> 287</th> 288<th class="cellrowborder" valign="top" width="32.62%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001127125110_p1693518359542"><a name="zh-cn_topic_0000001127125110_p1693518359542"></a><a name="zh-cn_topic_0000001127125110_p1693518359542"></a>描述</p> 289</th> 290</tr> 291</thead> 292<tbody><tr id="zh-cn_topic_0000001127125110_row10935173519540"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p9935103575411"><a name="zh-cn_topic_0000001127125110_p9935103575411"></a><a name="zh-cn_topic_0000001127125110_p9935103575411"></a>transition-enter</p> 293</td> 294<td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p1193512354547"><a name="zh-cn_topic_0000001127125110_p1193512354547"></a><a name="zh-cn_topic_0000001127125110_p1193512354547"></a>string</p> 295</td> 296<td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p1493563516544"><a name="zh-cn_topic_0000001127125110_p1493563516544"></a><a name="zh-cn_topic_0000001127125110_p1493563516544"></a>-</p> 297</td> 298<td class="cellrowborder" valign="top" width="32.62%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p493619354540"><a name="zh-cn_topic_0000001127125110_p493619354540"></a><a name="zh-cn_topic_0000001127125110_p493619354540"></a>与@keyframes配套使用，支持transform和透明度动画，详见<a href="js-components-common-animation.md#zh-cn_topic_0000001173164765_t48a722bba37a44c883ed4e046a4cf82e">表2</a>。</p> 299</td> 300</tr> 301<tr id="zh-cn_topic_0000001127125110_row193633565417"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p1993693511546"><a name="zh-cn_topic_0000001127125110_p1993693511546"></a><a name="zh-cn_topic_0000001127125110_p1993693511546"></a>transition-exit</p> 302</td> 303<td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p19361035165410"><a name="zh-cn_topic_0000001127125110_p19361035165410"></a><a name="zh-cn_topic_0000001127125110_p19361035165410"></a>string</p> 304</td> 305<td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p1293663519545"><a name="zh-cn_topic_0000001127125110_p1293663519545"></a><a name="zh-cn_topic_0000001127125110_p1293663519545"></a>-</p> 306</td> 307<td class="cellrowborder" valign="top" width="32.62%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p149361335125410"><a name="zh-cn_topic_0000001127125110_p149361335125410"></a><a name="zh-cn_topic_0000001127125110_p149361335125410"></a>与@keyframes配套使用，支持transform和透明度动画，详见<a href="js-components-common-animation.md#zh-cn_topic_0000001173164765_t48a722bba37a44c883ed4e046a4cf82e">表2</a>。</p> 308</td> 309</tr> 310<tr id="zh-cn_topic_0000001127125110_row129362359540"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p49367357548"><a name="zh-cn_topic_0000001127125110_p49367357548"></a><a name="zh-cn_topic_0000001127125110_p49367357548"></a>transition-duration</p> 311</td> 312<td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p11936183525411"><a name="zh-cn_topic_0000001127125110_p11936183525411"></a><a name="zh-cn_topic_0000001127125110_p11936183525411"></a>string</p> 313</td> 314<td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p1793614351547"><a name="zh-cn_topic_0000001127125110_p1793614351547"></a><a name="zh-cn_topic_0000001127125110_p1793614351547"></a>跟随设备默认的页面转场时间</p> 315</td> 316<td class="cellrowborder" valign="top" width="32.62%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p4936113565416"><a name="zh-cn_topic_0000001127125110_p4936113565416"></a><a name="zh-cn_topic_0000001127125110_p4936113565416"></a>支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms。</p> 317</td> 318</tr> 319<tr id="zh-cn_topic_0000001127125110_row1693643515414"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001127125110_p189368357548"><a name="zh-cn_topic_0000001127125110_p189368357548"></a><a name="zh-cn_topic_0000001127125110_p189368357548"></a>transition-timing-function</p> 320</td> 321<td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001127125110_p1493612358548"><a name="zh-cn_topic_0000001127125110_p1493612358548"></a><a name="zh-cn_topic_0000001127125110_p1493612358548"></a>string</p> 322</td> 323<td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001127125110_p393693555411"><a name="zh-cn_topic_0000001127125110_p393693555411"></a><a name="zh-cn_topic_0000001127125110_p393693555411"></a>friction</p> 324</td> 325<td class="cellrowborder" valign="top" width="32.62%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001127125110_p7936173505418"><a name="zh-cn_topic_0000001127125110_p7936173505418"></a><a name="zh-cn_topic_0000001127125110_p7936173505418"></a>描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见<a href="js-components-common-animation.md">动画样式</a>中“animation-timing-function”有效值说明。</p> 326</td> 327</tr> 328</tbody> 329</table> 330 331## 页面转场注意事项<a name="zh-cn_topic_0000001127125110_section99079442062"></a> 332 3331. 配置自定义转场时，建议配置页面背景色为不透明颜色，否则在转场过程中可能会出现衔接不自然的现象。 3342. transition-enter和transition-exit可单独配置，没有配置时使用系统默认的参数； 3353. transition-duration没有配置的时候使用系统默认值； 3364. transition-enter/transition-exit说明如下： 337 1. push场景下：进入页面栈的Page2.js应用transition-enter描述的动画配置；进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置； 338 339  340 341 2. back场景下：退出页面栈的Page2.js应用transition-enter描述的动画配置，并进行倒播；从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置，并进行倒播。 342 343  344 345 346 347
