fix(ui/input, select): fix placeholder animation and var--ellipsis class

affects: @varlet/ui
varletjs · Dec 25, 2021 · 458ab30 · 458ab30
1 parent a2c0dbc
commit 458ab30
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
@@ -70,7 +70,7 @@
     left: 0;
     width: 100%;
     transform-origin: left;
-    transition-property: top, transform;
+    transition-property: top, transform, width;
     transition-duration: 0.3s;
     transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1);
     font-size: var(--input-placeholder-size);
@@ -83,7 +83,8 @@
     left: 0;
     width: 100%;
     transform-origin: left;
-    transition: transform 0.3s;
+    transition-property: transform, width;
+    transition-duration: 0.3s;
     transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1);
     font-size: var(--input-placeholder-size);
     color: var(--input-blur-color);

diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less
@@ -93,7 +93,7 @@
     left: 0;
     width: 100%;
     transform-origin: left;
-    transition-property: top, transform;
+    transition-property: top, transform, width;
     transition-duration: 0.3s;
     transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1);
     font-size: var(--select-placeholder-size);

diff --git a/packages/varlet-ui/src/styles/common.less b/packages/varlet-ui/src/styles/common.less
@@ -32,6 +32,7 @@
   &--ellipsis {
     overflow-x: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &--inline-block {