是否可以从头到尾过渡占位符文本？

Question

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

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

所以对于长度为 100px 的容器，我可以通过以下方式过渡到文本的末尾：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>

我想知道是否可以使用 placeholder pseudo element.

的占位符文本实现上述效果

所以我尝试了以下方法：

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">

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

上可用属性的限制，上面的代码片段不起作用

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

很遗憾，transform¹ 没有出现在 that list。

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

奇怪的是，transform 属性在没有计算函数和动画的情况下似乎（有点）在 Chrome 上工作。

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">

Answer 1

您可以使用额外的包装器来模拟这一点，而无需在输入元素上真正使用占位符：

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>

是否可以从头到尾过渡占位符文本？

Is it possible to transition placeholder text from beginning to end?

css

placeholder