css的transition示例补充渐隐渐现

pages/CSS/transition/transition.uvue

@@ -2,64 +2,67 @@
   <!-- #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>
-      </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">点击修改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">动态修改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 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">点击修改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 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">点击修改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>
   <!-- #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;