From c1f0b69d3be5e78b158053187a3418d0146253df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com>
Date: Wed, 3 Jan 2024 19:58:34 +0800
Subject: [PATCH] =?UTF-8?q?transition-duration=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/choose-image/choose-image.uvue         |  2 +-
 pages/CSS/transition/transition.uvue             | 16 ++++++++--------
 .../general-event/transition-event.uvue          |  6 +++---
 pages/template/half-screen/half-screen.uvue      |  6 +++---
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/pages/API/choose-image/choose-image.uvue b/pages/API/choose-image/choose-image.uvue
index 14bf57ba..7a819839 100644
--- a/pages/API/choose-image/choose-image.uvue
+++ b/pages/API/choose-image/choose-image.uvue
@@ -288,6 +288,6 @@
     border-style: solid;
     padding: 20rpx;
     transition: height;
-    transition-duration: 300;
+    transition-duration: 300ms;
   }
 </style>
diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index 74c5d6b2..16367dc4 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -125,7 +125,7 @@
       propertyChangeBackground() {
         if (!this.isSetTransition) {
           this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
-          this.propertyStyleBackground?.style?.setProperty("transition-duration", "1000")
+          this.propertyStyleBackground?.style?.setProperty("transition-duration", "1000ms")
           this.isSetTransition = true
         }
         this.propertyStyleBackground?.style?.setProperty("background-color", this.isTransitionpropertystyleBackground
@@ -185,27 +185,27 @@
 
   .transition-width {
     transition-property: width;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-margin {
     transition-property: margin-left, margin-top;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-padding {
     transition-property: padding-left, padding-top;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-background {
     transition-property: background-color, opacity;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-transform {
     transition-property: transform;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-border {
@@ -213,11 +213,11 @@
     border-color: brown;
     border-style: solid;
     transition-property: border-color;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 
   .transition-position {
     transition-property: left;
-    transition-duration: 1000;
+    transition-duration: 1s;
   }
 </style>
diff --git a/pages/component/general-event/transition-event.uvue b/pages/component/general-event/transition-event.uvue
index 0979e408..29892934 100644
--- a/pages/component/general-event/transition-event.uvue
+++ b/pages/component/general-event/transition-event.uvue
@@ -30,14 +30,14 @@
           this.buttonValue = "关闭图片旋转"
           this.times = this.times + 1
           this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
-          this.element!.style.setProperty('transition-duration', '2000')
+          this.element!.style.setProperty('transition-duration', '2000ms')
           this.isStart = true
         } else {
           this.isStart = false
           this.times = 0
           this.buttonValue = "开启图片旋转"
           this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
-          this.element!.style.setProperty('transition-duration', '0')
+          this.element!.style.setProperty('transition-duration', '0s')
         }
       },
       onEnd() {
@@ -57,7 +57,7 @@
     height: 400rpx;
     margin: 50rpx auto;
     border-radius: 200rpx;
-    transition-duration: 2000;
+    transition-duration: 2000ms;
     transition-property: transform;
     transition-timing-function: linear;
     transform: rotate(0deg);
diff --git a/pages/template/half-screen/half-screen.uvue b/pages/template/half-screen/half-screen.uvue
index 89a2aeeb..88a28982 100644
--- a/pages/template/half-screen/half-screen.uvue
+++ b/pages/template/half-screen/half-screen.uvue
@@ -103,7 +103,7 @@
           this.halfNode?.style?.setProperty('transitionTimingFunction', 'linear');
           time *= (this.halfHeight / this.totalHeight);		//计算关闭动画时间
         }
-        this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
+        this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0)+"ms");
         this.halfNode?.style?.setProperty('transitionProperty', 'top');
         this.halfNode?.style?.setProperty('top', top.toFixed(2));
         setTimeout(() => {
@@ -119,7 +119,7 @@
       },
       resumeHalfScreen() {
         let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
-        this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
+        this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0)+"ms");
         this.halfNode?.style?.setProperty('transitionTimingFunction', 'ease-in-out');
         this.halfNode?.style?.setProperty('transitionProperty', 'transform');
         this.halfNode?.style?.setProperty('transform', 'translateY(0px)');
@@ -171,7 +171,7 @@
     transition-timing-function: ease-in-out;
     /*ease ease-in ease-out ease-in-out linear step-start step-end*/
     transition-property: top;
-    transition-duration: 0;
+    transition-duration: 0ms;
     visibility: hidden;
   }
 
-- 
GitLab