css的transition示例补充渐隐渐现

pages/CSS/transition/transition.uvue

@@ -2,7 +2,6 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
   <!-- #endif -->
-    <view>
     <view class="container">
       <text class="text">点击修改宽度</text>
       <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
@@ -31,6 +30,10 @@
         <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>
@@ -45,7 +48,8 @@
     </view>
     <view class="container">
       <text class="text">点击修改Transform和宽</text>
-        <view class="base-style transition-transform-width" id="styleTransformWithWidth" @click="changeTransformWithWidth"></view>
+      <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>
@@ -59,7 +63,6 @@
       <text class="text">点击修改Position</text>
       <view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
     </view>
-    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -79,11 +82,13 @@
         stylePadding: null as UniElement | null,
         isTransitionstyleBackground: false,
         isTransitionstyleBackground2: false,
+        isTransitionstyleOpacity: false,
         styleBackground: null as UniElement | null,
         styleBackground2: null as UniElement | null,
+        styleOpacity: null as UniElement | null,
         isTransitionStyleTransform: false,
         styleTransform: null as UniElement | null,
-        isTransitionStyleTransformWithWidth:false,
+        isTransitionStyleTransformWithWidth: false,
         styleTransformWithWidth: null as UniElement | null,
         isTransitionstyleBorder: false,
         styleBorder: null as UniElement | null,
@@ -105,6 +110,7 @@
       this.stylePadding = uni.getElementById("stylePadding")
       this.styleBackground = uni.getElementById("styleBackground")
       this.styleBackground2 = uni.getElementById("styleBackground2")
+      this.styleOpacity = uni.getElementById("styleOpacity")
       this.styleTransform = uni.getElementById("styleTransform")
       this.styleBorder = uni.getElementById("styleBorder")
       this.stylePosition = uni.getElementById("stylePosition")
@@ -163,6 +169,14 @@
         )
         this.isTransitionstyleBackground2 = !this.isTransitionstyleBackground2
       },
+      changeStyleOpacity() {
+        this.styleOpacity?.style?.setProperty("opacity", this.isTransitionstyleOpacity
+          ? '1'
+          : '0'
+        )
+        this.styleOpacity?.style?.setProperty("transition-duration", "1000ms")
+        this.isTransitionstyleOpacity = !this.isTransitionstyleOpacity
+      },
       propertyChangeBackground() {
         if (!this.isSetTransition) {
           this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
@@ -271,6 +285,11 @@
     transition-duration: 1s;
   }
 
+  .transition-opacity {
+    transition-property: opacity;
+    transition-duration: 1s;
+  }
+
   .transition-transform {
     transition-property: transform;
     transition-duration: 1s;
@@ -289,6 +308,7 @@
     transition-property: left;
     transition-duration: 1s;
   }
+
   .transition-transform-width {
     transition-property: transform, width;
     transition-duration: 1s;