css的transition示例补充渐隐渐现

6e7fb7ed · wanganxp · b37c4f68 · 6e7fb7ed
隐藏空白更改
内联并排

Showing with 76 addition and 56 deletion

pages/CSS/transition/transition.uvue pages/CSS/transition/transition.uvue +76 -56

未找到文件。
--- a/pages/CSS/transition/transition.uvue
+++ b/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;