triggered the pseudo elements keyframe animation in jQuery-CodePudding

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');
})

DEMO

Does anyone have idea please don't vote me down. Thank you so much.

CodePudding user response：

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 >Hatdog</div>
    <button> Open </button>
</body>
</html>