transition补充测试例

pages/CSS/transition/transition.uvue

 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-  <!-- #endif -->
-    <view class="container">
-      <text class="text">点击修改宽度</text>
-      <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
+  <!-- #endif -->
+    <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>
@@ -78,7 +82,9 @@
       return {
         isTranstionWidthOrHeight: false,
         widthOrHeight: null as UniElement | null,
-        widthProgress: 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,
@@ -113,7 +119,8 @@
     },
     onReady() {
       this.widthOrHeight = uni.getElementById("widthOrHeight")
-      this.widthProgress = uni.getElementById("widthProgress")
+      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")
@@ -138,6 +145,12 @@
       changeWidthProgress() {
         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