javascript - 如何使用 jQuery 对 HTML 元素应用 css 转换？

Question

我有以下代码:

<input type="text" name="name" required>

<div class="form-error-cont">
    <p class="form-err">
        <i class="icon-remove"></i>
        <span class="text">Your name is required.</span>
    </p>
</div>

现在，当表单为空时，我将使用 jQuery 将 animate 类添加到 form-err 类。

当 animate 类存在时，我想使用 CSS 单独为内部的 i 和 span 元素设置动画。

这怎么可能？这里需要任何特殊的CSS选择器吗？

Answer 1

您需要分别在 i 和 span 上使用 css 转换。

我修改了您的代码，请查看，这是您的答案。

HTML:

<input type="text" name="name" id="input" required>
<button id="btn">
 Check
</button>
<div class="form-error-cont">
<p class="form-err">
    <i class="icon-remove">i </i>
    <span class="text">Your name is required.</span>
</p>
</div>

CSS

.form-err{
 opacity:0;
 transition:0.2s all linear;
 }
.animate{
 opacity:1;
}
.icon-remove,
.text {
 display: inline-block;
 transition: transform 500ms;
 transform: translateY(50px);
 }
 .text {
  transform: translateY(-50px);
}
.animate .icon-remove,
.animate .text {
 transform: translateY(0px);
}
.icon-remove {
color: red;
}

jQuery

$(function(){
$('#btn').click(function(){
var val = $("#input").val();
if(val==''){
$(".form-err").addClass("animate");
} else{

}
});
});

工作 fiddle JsFiddle