在jQuery中触发伪元素关键帧动画
在jQuery中触发伪元素关键帧动画
提问于 2021-12-16 05:47:11
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-16 16:36:01
在css选择器出错的地方，我更改了以下内容：
.borders:before.s {
animation: loading_s 1s forwards;
}
.borders:after.ss {
animation: loading_ss 1s forwards;
}通过：
.borders.s:before {
animation: loading_s 1s forwards;
}
.borders.ss:after {
animation: loading_ss 1s forwards;
}注意:您可以使用空格切换多个类。
$('button').click(function() {
$('.borders').toggleClass('s ss');
})button {
position:absolute;
left:10%;
top:10px;
}
.borders {
display: inline-block;
padding: 4px;
}
.borders:after,
.borders:before {
position: absolute;
content: '';
height: 0%;
width: 0%;
}
@keyframes loading_s {
100% {
border-top: 2px solid black;
border-left: 2px solid black;
height: calc(100% - 12px);
width: calc(100% - 12px);
}
}
@keyframes loading_ss {
100% {
border-right: 2px solid black;
border-bottom: 2px solid black;
height: calc(100% - 12px);
width: calc(100% - 12px);
}
}
.borders:before {
left: 10px;
top: 10px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
}
.borders:after {
bottom: 10px;
right: 10px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.borders.s:before {
animation: loading_s 1s forwards;
}
.borders.ss:after {
animation: loading_ss 1s forwards;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title></title>
</head>
<body>
<div class="borders">Hatdog</div>
<button> Open </button>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70374366
复制相关文章
相似问题
腾讯云开发者
