transition-duration 添加单位

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>

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>

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);

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;
   }