CSS / jQuery / JS-滑入/滑出文本输入值

Question

只需检查是否有人知道用CSS或更可能是jQuery.animate（）在HTML文本输入框中为文本的滑出设置动画的轻松方法。 由于它们不是自己的元素，因此我不确定除了父输入框可用的样式属性以外，它们是否还可以用于操纵？ 不要求编写代码，只是想粉碎我的希望或指向建设性的方向！

Answer 1

您将在这里找到答案：CSS animation inside of input text?

例如，可以使用带有文本缩进的文本来动画化动画，但是仅在从一个边缘到另一边缘输入的文本内部对文本进行动画处理。 要从屏幕的左侧/右侧获得动画，您将需要添加自定义标记，以使DOM元素具有内部文本动画。

在我看来，您应该在要对文本进行动画处理并从屏幕边缘到输入元素进行动画处理的文本中额外使用<span>。完成后，您可以显示输入文本，并且会收到文本从屏幕边缘移至输入框的效果。

Answer 2

有点奇怪，但是确定吗？您可以对文本缩进进行动画处理以获得“幻灯片”。

#slideText {
  transition: text-indent 1s;
  text-indent: -100px;
}

#slideText:focus {
  text-indent: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="This is a test" id="slideText">