我想以动画方式添加一个类并删除它。
在 Google 中找到了有关转换的信息,但由于某种原因它不起作用。
当单击 block 上的按钮时,会添加一个具有 css 样式的类。在styles中,如果有属性:afterter,它必须随着动画出现和消失。 还有什么办法可以实现这一点?
$('button.add').click(function() {
$('div.required').addClass('required-empty');
setTimeout(function () {
$('div.required').removeClass('required-empty');
}, 5000);
});
.required-empty {
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required-empty:after {
position: absolute;
width: 11px;
height: 11px;
line-height: 12px;
font-size: 30px;
text-align: center;
right: -18px;
top: 50%;
color: #fa6464;
content: "s";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required {
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
width: 100px;
height: 50px;
background: #333;
margin-left: 100px;
}
.required:before {
position: absolute;
width: 11px;
height: 11px;
line-height: 12px;
font-size: 20px;
text-align: center;
left: -18px;
top: 50%;
color: #e0e0e3;
content: "R";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required.required-red:before {
color: #fa6464;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="required required-red">
</div>
<button class="add">addClass</button>
最佳答案
$('button.add').click(function() {
$('div.required').addClass('required-empty');
setTimeout(function () {
$('div.required').removeClass('required-empty');
}, 5000);
});
.required {
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
width: 100px;
height: 50px;
background: #333;
margin-left: 100px;
}
.required:before {
position: absolute;
width: 11px;
height: 11px;
line-height: 12px;
font-size: 20px;
text-align: center;
left: -18px;
top: 50%;
color: #e0e0e3;
content: "R";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required.required-red:before {
color: #fa6464;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required-empty {
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.required-empty:before {
position: absolute;
width: 11px;
height: 11px;
line-height: 12px;
font-size: 30px;
text-align: center;
right: -18px;
top: 50%;
color: #fa6464;
content: "s";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="required required-red">
</div>
<button class="add">addClass</button>
类顺序,您的默认
状态与空
类重叠
关于javascript - 在 block 中添加和删除类的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46708419/