Question

Codepen link（点击输入）

我想要做的是在出现的文字上添加某种opacity并应用transition。但看起来没有任何类或包装器，插件也没有提供API。

我能以任何方式为此制作流畅的动画吗？

Answer 1

您可以使用CSS过渡。看看这里：http://codepen.io/anon/pen/pJMoGj

input {
    color: #FFF;
}
input:focus {
    color: #000;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    -ms-transition: color 1s ease-in-out;
    -o-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}

Answer 2

你可以做的是使用CSS的rgba和jquery的css（）。

http://codepen.io/anon/pen/KpOKJp

我将css过渡应用于输入的1s颜色以及由jquery的click（）触发输入文本颜色不透明度的变化：

HTML：

<input type="text" id="fadein" value="test" />

CSS：

#fadein
{
    transition:color 1s;
}

JQUERY：

var opac=1;
$("#fadein").click(function()
                  {

    $("#fadein").css("color", "rgba(0,0,0,"+ opac +")");
    opac= 1-opac;
});

此方法与背景颜色无关。

Answer 3

不透明的东西很容易过渡的事情变得更难，但你可以通过背景过渡来理解它吗？

JavaScript

http://codepen.io/anon/pen/XbvWOp

jQuery蒙面输入：如何设置文本外观的动画？

3 个答案: