在 jQuery 中触发了伪元素关键帧动画

Question

所以我想通过 jQuery 为按钮中的伪元素设置动画，但它是悬停时触发的伪元素动画。这里是

.

这是我的代码，想要触发伪元素动画，但点击后没有任何反应。

$('button').click(function() {
    $('.borders').toggleClass('s');
})

DEMO

Answer 1

你的 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;
}

注意：您可以使用 space.

切换多个 class

$('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>

在 jQuery 中触发了伪元素关键帧动画

triggered the pseudo elements keyframe animation in jQuery

javascript

jquery

animation