tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/css/transition.md

@@ -0,0 +1,527 @@
+## transition
+
+transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+transition: <single-transition>#;
+```
+
+### 值限制
+- time
+- enum
+
+### transition 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| all | Web 4.0 / Android 4.13 / iOS 4.13 / HarmonyOS 4.61 | 每一个能够进行过渡动画的属性都会进行过渡动画。 |
+| none | Web 4.0 / Android 4.13 / iOS 4.13 / HarmonyOS 4.61 | 没有属性会进行过渡动画。 |
+
+#### App平台
+从 HBuilderX4.11 版起，默认值调整为`all`。HBuilderX4.11 以下版本，默认值为`none`。
+
+transition暂不支持结束属性值为百分比。
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="uni-theme-root" style="flex: 1">
+  
+  <view class="transition-page uni-theme-root">
+    <view class="container">
+      <text class="text">点击修改宽度</text>
+      <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改宽度(递增)</text>
+      <view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改宽度(通过style设置transition)</text>
+      <view class="base-style" style="transition-property: width; transition-duration: 1s;" id="widthOrHeightStyle"
+        @click="changeWidthOrHeightStyle"></view>
+    </view>
+
+    <view class="container">
+      <text class="text">点击修改Margin</text>
+      <view class="base-style transition-margin" id="styleMargin" @click="changeMargin"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改Padding</text>
+      <view class="base-style transition-padding" id="stylePadding" @click="changePadding">
+        <view style="background-color: black; height: 50px; width: 50px"></view>
+      </view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改background-color和opacity</text>
+      <view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改background-color（rgba）</text>
+      <view style="flex: 1;">
+        <view class="base-style transition-background" id="styleBackground2" @click="changeBackground2"></view>
+      </view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改opacity渐隐渐现</text>
+      <view class="base-style transition-opacity" id="styleOpacity" @click="changeStyleOpacity"></view>
+    </view>
+    <view class="container">
+      <text class="text">动态修改background-color和duration</text>
+      <view class="base-style" id="propertyStyleBackground" @click="propertyChangeBackground"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改Transform</text>
+      <view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改TransformTranslate</text>
+      <view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改Transform和宽</text>
+      <view class="base-style transition-transform-width" id="styleTransformWithWidth"
+        @click="changeTransformWithWidth"></view>
+    </view>
+    <view class="container" @click="changeTransformWithOrigin">
+      <text class="text">点击修改Transform（含transform-origin）</text>
+      <view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin"></view>
+    </view>
+
+    <view class="container">
+      <text class="text">点击修改Border</text>
+      <view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改Position</text>
+      <view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改bottom</text>
+      <view>
+        <view class="base-style transition-bottom" id="styleBottom" @click="changeStyleBottom"></view>
+      </view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改Scale
+      </text>
+      <view class="base-style transition-transform" id="styleChangScale" @click="changestyleScale"></view>
+    </view>
+    <view class="container">
+      <text class="text">点击修改scale和opacity(cubic-bezier回弹)</text>
+      <view class="base-style transition-scale-opacity" id="styleScaleOpacity" @click="changeScaleOpacity"></view>
+    </view>
+    <view class="container">
+      <text class="text">仅指定transition-duration背影有动画为正常</text>
+      <view style="width: 100%;height: 50px;" :style="changestyleTransitionDuration"
+        @click="doChangeTransitionDuration">
+      </view>
+    </view>
+
+    <view class="container">
+      <text class="text">transition-property: all/none 演示</text>
+      <view class="base-style transition-all" id="styleTransitionAll" @click="changeTransitionAll"></view>
+    </view>
+
+    <view class="container">
+      <text class="text">在组件内滑动测试是否闪动</text>
+      <view class="base-style transition-transform" id="styleTransformTranslateScale" @touchmove="handleTouchMove"
+        @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+        这是一段文字
+      </view>
+    </view>
+
+    <view class="container">
+      <text class="text">测试在style中同时修改transform和width</text>
+      <view style="width:100%;height: 100%;">
+        <view class="base-style transition-transform-width" :style="{transform:`translateX(${lineLeft}px)`,width:`${lineWidth}px`}" @click="changeTransform61">
+        </view>
+      </view>
+    </view>
+
+    <view class="container">
+      <text class="text">测试在style中同时修改transform的translateX/Y的百分比</text>
+      <view style="width:100%;height: 100%;">
+        <view class="base-style transition-transform-translate" :style="{transform:`translateX(${translatePercent}) translateY(${translatePercent})`}" @click="changeTransform27520">
+        </view>
+      </view>
+    </view>
+
+    <view class="container">
+      <text class="text">点击修改宽度(值为auto有无动画交替出现)</text>
+      <view class="base-style transition-width" id="widthOrHeightAuto" @click="changeWidthOrHeightAuto"></view>
+    </view>
+
+    <view class="container">
+      <view class="text">重复修改width</view>
+      <view class="base-style transition-width" id="changeWidthInEnd" style="transition-duration: 0.5s;" @transitionend="onChangeWidthEnd" @click="changeWidthInEndFun"></view>
+    </view>
+
+    <view style="margin-top: 20px; margin-left: 7px;">
+      <text class="transition-heading">text 组件 transition </text>
+    </view>
+
+    <view class="container">
+      <text class="text">text 点击修改 transform (rotate)</text>
+      <text class="text-base-style transition-transform" id="textTransform" @click="changeTextTransform">文字内容</text>
+    </view>
+
+    <view class="container">
+      <text class="text">text 点击修改 opacity</text>
+      <text class="text-base-style transition-opacity" id="textOpacity" @click="changeTextOpacity">文字内容</text>
+    </view>
+
+    <view class="container">
+      <text class="text">text 点击修改 background-color</text>
+      <text class="text-base-style transition-background" id="textBackground" @click="changeTextBackground">文字内容</text>
+    </view>
+
+    <view style="margin-top: 20px; margin-left: 7px;">
+      <text class="transition-heading">image 组件 transition </text>
+    </view>
+
+    <view class="container">
+      <text class="text">image 点击修改 transform (rotate)</text>
+      <image class="image-base-style transition-transform" id="imageTransform" @click="changeImageTransform" src="/static/test-image/logo.png"></image>
+    </view>
+
+    <view class="container">
+      <text class="text">image 点击修改 opacity</text>
+      <image class="image-base-style transition-opacity" id="imageOpacity" @click="changeImageOpacity" src="/static/test-image/logo.png"></image>
+    </view>
+
+    <view class="container">
+      <text class="text">image 点击修改 transform (scale)</text>
+      <image class="image-base-style transition-transform" id="imageScale" @click="changeImageScale" src="/static/test-image/logo.png"></image>
+    </view>
+
+    <view class="container">
+      <text class="text">设置box-shadow之后验证border和background-color效果</text>
+      <view class="base-style transition-border-background" id="borderAndBackgroundColor" @click="changeBorderAndBackgroundColor"></view>
+    </view>
+
+    <text class="uni-title-text uni-common-mt">scroll-view 组件</text>
+    <text class="text">点击 scroll-view 查看 transition 效果</text>
+
+    <view class="demo-box">
+      <scroll-view ref="scrollView1" class="base-style" style="transition: width 1s;" @click="changeScrollViewWidth1">
+        <text class="colored-box-text">transition: width 1s</text>
+      </scroll-view>
+      <scroll-view ref="scrollView2" class="base-style" style="transition: width 2s ease-in-out;" @click="changeScrollViewWidth2">
+        <text class="colored-box-text">transition: width 2s ease-in-out</text>
+      </scroll-view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+    </view>
+
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件</text>
+        <text class="uni-info">设置值: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActual}}</text>
+        <view class="test-box">
+          <view ref="viewRefTransition" class="common-image" :style="{ transition: data.transitionValue }" @click="triggerTransitionView">
+            <text class="colored-box-text" style="font-size: 12px;">点击view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件</text>
+        <text class="uni-info">设置值 sdf: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActualText}}</text>
+        <view class="test-box">
+          <text ref="textRefTransition" class="common-text" :style="{ transition: data.transitionValue }" @click="triggerTransitionText">点击text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件</text>
+        <text class="uni-info">设置值: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActualImage}}</text>
+        <view class="test-box">
+          <image ref="imageRefTransition" class="common-image" :style="{ transition: data.transitionValue }" @click="triggerTransitionImage" src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件拍平</text>
+        <text class="uni-info">设置值: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActualFlat}}</text>
+        <view class="test-box">
+          <view ref="viewRefTransitionFlat" class="common-image" :style="{ transition: data.transitionValue }" @click="triggerTransitionView" flatten>
+            <text class="colored-box-text" style="font-size: 12px;">点击view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件拍平</text>
+        <text class="uni-info">设置值: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActualTextFlat}}</text>
+        <view class="test-box">
+          <text ref="textRefTransitionFlat" class="common-text" :style="{ transition: data.transitionValue }" @click="triggerTransitionText" flatten>点击text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件拍平</text>
+        <text class="uni-info">设置值: {{data.transitionValue}}</text>
+        <text class="uni-info">获取值: {{data.transitionActualImageFlat}}</text>
+        <view class="test-box">
+          <image ref="imageRefTransitionFlat" class="common-image" :style="{ transition: data.transitionValue }" @click="triggerTransitionImage" src="/static/test-image/logo.png" flatten></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt uni-common-mb">
+      <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+      <enum-data :items="transitionEnum" title="transition 枚举值" @change="radioChangeTransition" :compact="true"></enum-data>
+      <input-data :defaultValue="data.transitionValue" title="transition 自定义值" type="text" @confirm="inputChangeTransition"></input-data>
+    </view>
+
+    
+      <text class="uni-title-text uni-common-mt uni-common-mb">native-view 组件</text>
+      <text class="text">点击 native-view 查看 transition 效果</text>
+      <view class="demo-box">
+        <test-native-view ref="nativeView1" class="base-style" style="transition: width 1s;" @click="changeNativeViewWidth1"></test-native-view>
+        <test-native-view ref="nativeView2" class="base-style" style="transition: width 2s ease-in-out;" @click="changeNativeViewWidth2"></test-native-view>
+      </view>
+    
+
+		<view style="margin: 7px; height: 60px;">
+			<navigator url="/pages/CSS/transition/transition-transform" hover-class="none">
+				<button type="primary">
+					transform 多个属性示例
+				</button>
+			</navigator>
+		</view>
+  </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .container {
+    margin: 7px;
+    background-color: var(--list-background-color, #ffffff);
+  }
+
+  .text {
+    margin-top: 10px;
+    margin-bottom: 16px;
+    color: var(--text-color, #333333);
+  }
+
+  .transition-heading {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--text-color, #333333);
+  }
+
+  .colored-box-text {
+    color: #ffffff;
+  }
+
+  .base-style {
+    width: 100px;
+    height: 100px;
+    background-color: brown;
+  }
+
+  .demo-box {
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 10px;
+  }
+
+  .width-progress {
+    width: 100px;
+    height: 100px;
+    border-radius: 100px;
+    background-color: brown;
+  }
+
+  .transform-bgColor {
+    transition-property: background-color;
+    transition-duration: 0.5s;
+  }
+
+  .transition-width {
+    transition-property: width;
+    transition-duration: 1s;
+  }
+
+  .transition-margin {
+    transition-property: margin-left, margin-top;
+    transition-duration: 1s;
+  }
+
+  .transition-padding {
+    transition-property: padding-left, padding-top;
+    transition-duration: 1s;
+  }
+
+  .transition-background {
+    transition-property: background-color, opacity;
+    transition-duration: 1s;
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-duration: 1s;
+  }
+
+  .transition-transform {
+    transform: translate(0%, 0%) scaleX(1) rotate(0deg);
+    transition-property: transform;
+    transition-duration: 1s;
+  }
+
+  .transition-scale-opacity {
+    opacity: 1;
+    transform: scale(1);
+    transition-property: transform, opacity;
+    transition-duration: 800ms;
+    transition-timing-function: cubic-bezier(0.2, 1.8, 0.3, 1);
+  }
+
+  .transition-border {
+    border-width: 5px;
+    border-color: brown;
+    border-style: solid;
+    transition-property: border-color;
+    transition-duration: 1s;
+  }
+
+  .transition-position {
+    left: 0px;
+    transition-property: left;
+    transition-duration: 1s;
+  }
+
+  .transition-bottom {
+    position: relative;
+    bottom: 0px;
+    transition-property: bottom;
+    transition-duration: 1s;
+  }
+
+  .transition-transform-width {
+    transform: rotate(0deg);
+    transition-property: transform, width;
+    transition-duration: 1s;
+  }
+
+  .transition-transform-translate {
+    transition-property: transform;
+    transition-duration: 1s;
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-duration: 1s;
+  }
+
+  .text-base-style {
+    width: 200px;
+    height: 50px;
+    padding: 10px;
+    font-size: 16px;
+    text-align: center;
+    background-color: lightblue;
+    color: #1a1a1a;
+  }
+
+  .image-base-style {
+    width: 100px;
+    height: 100px;
+  }
+  .transition-border-background {
+    box-shadow: 8px 8px 8px rgba(0, 255, 0, 1);
+    border-color: blue;
+    border-width: 3px;
+    border-style: solid;
+    transition-property: border-color, background-color;
+    transition-duration: 1s;
+  }
+
+  .common-text {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    font-size: 12px;
+    color: white;
+  }
+
+  .common-image {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 120px;
+    background-color: gray;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition)
+
+### Bug & Tips@tips
+
+- App-Harmony 平台， 更新属性值时是否有动画效果，取决于 `transition-property` 中是否包含该属性。\
+例如要对 `width` 做动画效果，初始宽度不需要动画效果，则应该在设置 `transition-property: width` 前设置初始宽度。\
+后续修改 `width` 需要有动画效果时，需要在修改前设置 `transition-property: width`。
+```css
+.box {
+	/* 初始宽度不需要动画效果, 需要设置在 transition-property: width 之前 */
+	width: 100px;
+	transition-property: width;
+	transition-duration: 1s;
+}
+/* 因为之前设置了 transition-property: width，此时修改 width 会有动画效果 */
+.box.active {
+	width: 200px;
+}
+```