From 8e1ace06e636baa5f70c9c7075bcf44921df3256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com>
Date: Tue, 12 Dec 2023 18:59:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0transition=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/transition/transition.uvue | 36 +++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index 5b26c35d..74c5d6b2 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -21,10 +21,18 @@
         <text class="text">点击修改Background</text>
         <view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
       </view>
+      <view class="container">
+        <text class="text">动态修改Background</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">点击修改Transform（含transform-origin）</text>
+        <view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin" @click="changeTransformWithOrigin"></view>
+      </view>
       <view class="container">
         <text class="text">点击修改Border</text>
         <view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
@@ -57,6 +65,11 @@
         styleBorder: null as Element | null,
         isTransitionstylePosition: false,
         stylePosition: null as Element | null,
+        isSetTransition: false,
+        isTransitionpropertystyleBackground: false,
+        propertyStyleBackground: null as Element | null,
+        isTransitionStyleTransformWithOrigin: false,
+        styleTransformWithOrigin: null as Element | null,
       }
     },
     onReady() {
@@ -67,6 +80,8 @@
       this.styleTransform = uni.getElementById("styleTransform")
       this.styleBorder = uni.getElementById("styleBorder")
       this.stylePosition = uni.getElementById("stylePosition")
+      this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
+      this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
     },
     methods: {
       changeWidthOrHeight() {
@@ -107,6 +122,18 @@
         )
         this.isTransitionstyleBackground = !this.isTransitionstyleBackground
       },
+      propertyChangeBackground() {
+        if (!this.isSetTransition) {
+          this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
+          this.propertyStyleBackground?.style?.setProperty("transition-duration", "1000")
+          this.isSetTransition = true
+        }
+        this.propertyStyleBackground?.style?.setProperty("background-color", this.isTransitionpropertystyleBackground
+          ? 'brown'
+          : 'black'
+        )
+        this.isTransitionpropertystyleBackground = !this.isTransitionpropertystyleBackground
+      },
       changeTransform() {
         this.styleTransform?.style?.setProperty("transform", this.isTransitionStyleTransform
           ? 'rotate(0deg)'
@@ -114,6 +141,13 @@
         )
         this.isTransitionStyleTransform = !this.isTransitionStyleTransform
       },
+      changeTransformWithOrigin() {
+        this.styleTransformWithOrigin?.style?.setProperty("transform", this.isTransitionStyleTransformWithOrigin
+          ? 'scaleX(1)'
+          : 'scaleX(0)'
+        )
+        this.isTransitionStyleTransformWithOrigin = !this.isTransitionStyleTransformWithOrigin
+      },
       changeBorder() {
         this.styleBorder?.style?.setProperty("border-color", this.isTransitionstyleBorder
           ? 'brown'
@@ -186,4 +220,4 @@
     transition-property: left;
     transition-duration: 1000;
   }
-</style>
\ No newline at end of file
+</style>
-- 
GitLab