So I would like to animated this pseudo elements in a button by a jQuery but it is a pseudo element animation that triggered when hover. Here is the
DEMO.
And this is my code that wants to triggered the pseudo element animation but nothings happen after clicking it.
$('button').click(function() {
$('.borders').toggleClass('s');
})
You where wrong in your css selector, i changed this :
.borders:before.s {
animation: loading_s 1s forwards;
}
.borders:after.ss {
animation: loading_ss 1s forwards;
}
by :
.borders.s:before {
animation: loading_s 1s forwards;
}
.borders.ss:after {
animation: loading_ss 1s forwards;
}
NOTE: you can toggle multiple class using space.
$('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>