是否可以将占位符文本从头到尾过渡? [英] Is it possible to transition placeholder text from beginning to end?

问题描述

我想在已知宽度的文本输入(隐藏溢出)中，将一行动态占位符文本从头到尾过渡

I would like to transition a single line of dynamic placeholder text from beginning to end within a text input of known width (which hides overflow)

现在，我知道对于常规容器div来说，我可以利用转换来转换正确的长度...

Now I know that for a regular container div I can make use of transforms to transition the correct length...

因此对于长度为100px的容器，我可以使用transform: translateX(calc(100px - 100%)

so for a container of length 100px I could transition to the end of the text with: transform: translateX(calc(100px - 100%)

div {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}
div {
  white-space: nowrap;
  overflow: hidden;
}
span {
  display: inline-block;
  animation: 4s scrollText forwards;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}

<div><span>some really really really long text here</span></div>

我想知道是否可以使用占位符伪元素.

I was wondering if I could achieve the above effect with placeholder text using the placeholder pseudo element.

所以我尝试了以下操作:

So I tried the following:

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  animation: 4s scrollText;
  transform: translateX(0);
}

@keyframes scrollText {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(calc(100px - 100%));
  }
}

<input type="text" placeholder="some really really really long text here">

...但是由于占位符伪元素

... but the above snippet doesn't work because of a limitation of the properties available on the placeholder pseudo element

所有适用于 :: first-line pseudo的属性-element 也 适用于:: placeholder伪元素.

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

不幸的是，transform ¹ 没有出现在该列表.

Unfortunately, transform¹ doesn't appear in that list.

所以我想知道是否还有另一种方法可以实现-可能具有占位符伪元素支持的其他属性.

So I was wondering if there is another way of achieving this - possibly with other properties which are supported by the placeholder pseudo element.

1. 奇怪的是，当不使用calc函数和动画时，transform属性似乎确实在Chrome上可以正常工作.

1. Strangely enough, the transform property did seem to (sort of) work on Chrome when used without the calc function and the animation.

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  transform: translateX(-50%);
}

<input type="text" placeholder="some really really really long text here">

推荐答案

您可以使用额外的包装程序对此进行模拟，而无需在输入元素上实际使用占位符:

You can simulate this using an extra wrapper without really using a placeholder on the input element:

input {
  width: 100px;
  border: 2px solid green;
  padding: 5px;
  vertical-align:top;
  background:transparent; /* a transparent background to show the pseudo element */
}


.input {
  display:inline-block;
  margin: 10px;
  position:relative;
  z-index:0;
  overflow:hidden;
}

.input:before {
  content:attr(placeholder);
  position:absolute;
  left:5px;
  top:5px;
  white-space:nowrap; /* no line break */
  color: red;
  pointer-events:none; /* avoid any interaction */
  animation: 4s scrollText forwards;
  z-index:-1;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}

/* hide the before on focus */
.input:focus-within:before{
   visibility:hidden;
}

/* add background to hide the before when there is text and no focus*/
input:not(:placeholder-shown) {
  background:#fff;
}

<div class="input" placeholder="some really really really long text here">
<input type="text" placeholder=" "> <!-- needs an empty placeholder for :placeholder-shown -->
</div>

这篇关于是否可以将占位符文本从头到尾过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！