更新transition示例使用uni.getElementById操作style

pages/CSS/transition/transition.uvue

@@ -5,63 +5,33 @@
     <view>
       <view class="container">
         <text class="text">点击修改宽度</text>
-        <view
-          class="base-style transition-width"
-          :style="widthOrHeight"
-          @click="changeWidthOrHeight"
-        ></view>
+        <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
       </view>
       <view class="container">
         <text class="text">点击修改Margin</text>
-        <view
-          class="base-style transition-margin"
-          :style="styleMargin"
-          @click="changeMargin"
-        ></view>
+        <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"
-          :style="stylePadding"
-          @click="changePadding"
-        >
-          <view
-            style="background-color: black; height: 50px; width: 50px"
-          ></view>
+        <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</text>
-        <view
-          class="base-style transition-background"
-          :style="styleBackground"
-          @click="changeBackground"
-        ></view>
+        <view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
       </view>
       <view class="container">
         <text class="text">点击修改Transform</text>
-        <view
-          class="base-style transition-transform"
-          :style="styleTransform"
-          @click="changeTransform"
-        ></view>
+        <view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
       </view>
       <view class="container">
         <text class="text">点击修改Border</text>
-        <view
-          class="base-style transition-border"
-          :style="styleBorder"
-          @click="changeBorder"
-        ></view>
+        <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"
-          :style="stylePosition"
-          @click="changestylePosition"
-        ></view>
+        <view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
       </view>
     </view>
   <!-- #ifdef APP -->
@@ -70,124 +40,150 @@
 </template>
 
 <script>
-export default {
+  export default {
     data() {
       return {
         isTranstionWidthOrHeight: false,
-      widthOrHeight: '',
+        widthOrHeight: null as Element | null,
         isTranstionChangeMargin: false,
-      styleMargin: '',
+        styleMargin: null as Element | null,
         isTransitionStylePadding: false,
-      stylePadding: '',
+        stylePadding: null as Element | null,
         isTransitionstyleBackground: false,
-      styleBackground: '',
+        styleBackground: null as Element | null,
         isTransitionStyleTransform: false,
-      styleTransform: '',
+        styleTransform: null as Element | null,
         isTransitionstyleBorder: false,
-      styleBorder: '',
+        styleBorder: null as Element | null,
         isTransitionstylePosition: false,
-      stylePosition: '',
+        stylePosition: null as Element | null,
       }
     },
+    onReady() {
+      this.widthOrHeight = uni.getElementById("widthOrHeight")
+      this.styleMargin = uni.getElementById("styleMargin")
+      this.stylePadding = uni.getElementById("stylePadding")
+      this.styleBackground = uni.getElementById("styleBackground")
+      this.styleTransform = uni.getElementById("styleTransform")
+      this.styleBorder = uni.getElementById("styleBorder")
+      this.stylePosition = uni.getElementById("stylePosition")
+    },
     methods: {
       changeWidthOrHeight() {
-      this.widthOrHeight = this.isTranstionWidthOrHeight
-        ? 'width:400rpx'
-        : 'width:600rpx'
+        this.widthOrHeight?.style?.setProperty("width", this.isTranstionWidthOrHeight
+          ? '400rpx'
+          : '600rpx')
         this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
       },
       changeMargin() {
-      this.styleMargin = this.isTranstionChangeMargin
-        ? 'margin-top:0rpx;margin-left:0rpx'
-        : 'margin-top:100rpx;margin-left:100rpx'
+        this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
+          ? '0rpx'
+          : '100rpx'
+        )
+        this.styleMargin?.style?.setProperty("margin-left", this.isTranstionChangeMargin
+          ? '0rpx'
+          : '100rpx'
+        )
         this.isTranstionChangeMargin = !this.isTranstionChangeMargin
       },
 
       changePadding() {
-      this.stylePadding = this.isTransitionStylePadding
-        ? 'padding-top:0rpx;padding-left:0rpx'
-        : 'padding-top:100rpx;padding-left:100rpx'
+        this.stylePadding?.style?.setProperty("padding-top", this.isTransitionStylePadding
+          ? '0rpx'
+          : '100rpx')
+        this.stylePadding?.style?.setProperty("padding-left", this.isTransitionStylePadding
+          ? '0rpx'
+          : '100rpx')
         this.isTransitionStylePadding = !this.isTransitionStylePadding
       },
       changeBackground() {
-      this.styleBackground = this.isTransitionstyleBackground
-        ? 'background-color: brown;opacity:1'
-        : 'background-color: black;opacity:0.5'
+        this.styleBackground?.style?.setProperty("background-color", this.isTransitionstyleBackground
+          ? 'brown'
+          : 'black'
+        )
+        this.styleBackground?.style?.setProperty("opacity", this.isTransitionstyleBackground
+          ? '1'
+          : '0.5'
+        )
         this.isTransitionstyleBackground = !this.isTransitionstyleBackground
       },
       changeTransform() {
-      this.styleTransform = this.isTransitionStyleTransform
-        ? 'transform: rotate(0deg)'
-        : 'transform: rotate(135deg)'
+        this.styleTransform?.style?.setProperty("transform", this.isTransitionStyleTransform
+          ? 'rotate(0deg)'
+          : 'rotate(135deg)'
+        )
         this.isTransitionStyleTransform = !this.isTransitionStyleTransform
       },
       changeBorder() {
-      this.styleBorder = this.isTransitionstyleBorder
-        ? 'border-color: brown;'
-        : 'border-color: yellow;'
+        this.styleBorder?.style?.setProperty("border-color", this.isTransitionstyleBorder
+          ? 'brown'
+          : 'yellow'
+        )
         this.isTransitionstyleBorder = !this.isTransitionstyleBorder
       },
       changestylePosition() {
-      this.stylePosition = this.isTransitionstylePosition
-        ? 'left:0rpx'
-        : 'left:150rpx;'
+        this.stylePosition?.style?.setProperty("left", this.isTransitionstylePosition
+          ? '0rpx'
+          : '150rpx'
+        )
         this.isTransitionstylePosition = !this.isTransitionstylePosition
       },
     },
-}
+  }
 </script>
 
 <style>
-.container {
+  .container {
     margin: 15rpx;
     background-color: white;
-}
-.text {
+  }
+
+  .text {
     margin-top: 20rpx;
     margin-bottom: 32rpx;
-}
+  }
 
-.base-style {
+  .base-style {
     width: 400rpx;
     height: 400rpx;
     background-color: brown;
-}
+  }
 
-.transition-width {
+  .transition-width {
     transition-property: width;
     transition-duration: 1000;
-}
+  }
 
-.transition-margin {
+  .transition-margin {
     transition-property: margin-left, margin-top;
     transition-duration: 1000;
-}
+  }
 
-.transition-padding {
+  .transition-padding {
     transition-property: padding-left, padding-top;
     transition-duration: 1000;
-}
+  }
 
-.transition-background {
+  .transition-background {
     transition-property: background-color, opacity;
     transition-duration: 1000;
-}
+  }
 
-.transition-transform {
+  .transition-transform {
     transition-property: transform;
     transition-duration: 1000;
-}
+  }
 
-.transition-border {
+  .transition-border {
     border-width: 5px;
     border-color: brown;
     border-style: solid;
     transition-property: border-color;
     transition-duration: 1000;
-}
+  }
 
-.transition-position {
+  .transition-position {
     transition-property: left;
     transition-duration: 1000;
-}
+  }
 </style>
\ No newline at end of file