From feee499057dea0f945c89401e4b01506e2e7e164 Mon Sep 17 00:00:00 2001
From: xty <xty@dcloud.io>
Date: Thu, 12 Dec 2024 11:47:12 +0800
Subject: [PATCH] =?UTF-8?q?transition=E8=A1=A5=E5=85=85=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/transition/transition.uvue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index 6310eede..f2c4a823 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -1,14 +1,18 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-  <!-- #endif -->
-    <view class="container">
-      <text class="text">点击修改宽度</text>
-      <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
+  <!-- #endif -->
+    <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">点击修改宽度(通过style设置transition)</text>
+      <view class="base-style" style="transition-property: width; transition-duration: 1s;" id="widthOrHeightStyle" @click="changeWidthOrHeightStyle"></view>
     </view>
     <view class="container">
       <text class="text">点击修改Margin</text>
@@ -78,7 +82,9 @@
       return {
         isTranstionWidthOrHeight: false,
         widthOrHeight: null as UniElement | null,
-        widthProgress: null as UniElement | null,
+        widthProgress: null as UniElement | null,
+        isTranstionWidthOrHeightStyle: false,
+        widthOrHeightStyle: null as UniElement | null,
         progressWidth: 200,
         isTranstionChangeMargin: false,
         styleMargin: null as UniElement | null,
@@ -113,7 +119,8 @@
     },
     onReady() {
       this.widthOrHeight = uni.getElementById("widthOrHeight")
-      this.widthProgress = uni.getElementById("widthProgress")
+      this.widthProgress = uni.getElementById("widthProgress")
+      this.widthOrHeightStyle = uni.getElementById("widthOrHeightStyle")
       this.styleMargin = uni.getElementById("styleMargin")
       this.stylePadding = uni.getElementById("stylePadding")
       this.styleBackground = uni.getElementById("styleBackground")
@@ -138,6 +145,12 @@
       changeWidthProgress() {
         this.progressWidth += 20
         this.widthProgress?.style?.setProperty("width", this.progressWidth + 'px')
+      },
+      changeWidthOrHeightStyle() {
+        this.widthOrHeightStyle?.style?.setProperty("width", this.isTranstionWidthOrHeightStyle
+          ? '200px'
+          : '300px')
+        this.isTranstionWidthOrHeightStyle = !this.isTranstionWidthOrHeightStyle
       },
       changeMargin() {
         this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
-- 
GitLab