html - CSS:输入文本中的淡入过渡？

Question

有没有一种方法可以编写一个 CSS 过渡，在用户输入时在输入文本元素中淡入淡出？

目前，文本可以在普通的 HTML 文本元素中淡入，因为我们可以告诉它从 0 过渡到 1 不透明度；但在用户输入之前输入文本并不存在。

例如，如果我输入我的用户名，我输入的字母会淡入，每个字母的不透明度会在 0.3 秒内从 0 变为 1。

我试过使用过渡和动画，但想将其保留在 CSS 中。

Answer 1

实现类似效果的可能方法:使用线性渐变创建部分透明的叠加层，并在您键入时通过移动蒙版位置逐渐显示。

 <div id='container'>
    <input type='text'></input>
    <div class='fader'></div>
 </div>

$("input").on("keydown", function(e) {
    var width = $("input").val().length + 1;
    $(".fader").css("left", (width * 8) + 3);
});


#container {
    position: relative;
    height: 25px;
    width: 400px;
}

input {
    width: 100%;
}

input, .fader {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    font-family: monospace;
}

.fader {
    top: 2px;
    bottom: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
    transition: left 1s ease;
}

这是 fiddle 的样子:

http://jsfiddle.net/go7trwzx/1/