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

您需要分别使用css transformation和i上的span。

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

<强> 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{

}
});
});

工作小提琴 JsFiddle

Answer 2

我不太确定你想要它的动画，但是我创造了一个你可以轻松编辑的小提琴。

https://jsfiddle.net/room1tfv/2/

如果输入为空，您可以与$('input').val();核对。

目前班级在空的时候得到了，但是根据你所说的你可能想要扭转它。

随意发表评论并要求更改！

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

2 个答案: