transition补充测试例

pages/CSS/transition/transition.uvue

@@ -10,6 +10,10 @@
       <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>
@@ -79,6 +83,8 @@
         isTranstionWidthOrHeight: false,
         widthOrHeight: null as UniElement | null,
         widthProgress: null as UniElement | null,
+        isTranstionWidthOrHeightStyle: false,
+        widthOrHeightStyle: null as UniElement | null,
         progressWidth: 200,
         isTranstionChangeMargin: false,
         styleMargin: null as UniElement | null,
@@ -114,6 +120,7 @@
     onReady() {
       this.widthOrHeight = uni.getElementById("widthOrHeight")
       this.widthProgress = uni.getElementById("widthProgress")
+      this.widthOrHeightStyle = uni.getElementById("widthOrHeightStyle")
       this.styleMargin = uni.getElementById("styleMargin")
       this.stylePadding = uni.getElementById("stylePadding")
       this.styleBackground = uni.getElementById("styleBackground")
@@ -139,6 +146,12 @@
         this.progressWidth += 20
         this.widthProgress?.style?.setProperty("width", this.progressWidth + 'px')
       },
+      changeWidthOrHeightStyle() {
+        this.widthOrHeightStyle?.style?.setProperty("width", this.isTranstionWidthOrHeightStyle
+          ? '200px'
+          : '300px')
+        this.isTranstionWidthOrHeightStyle = !this.isTranstionWidthOrHeightStyle
+      },
       changeMargin() {
         this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
           ? '0px'