触发jQuery中的伪元素关键帧动画答案

【问题标题】：triggered the pseudo elements keyframe animation in jQuery触发jQuery中的伪元素关键帧动画
【发布时间】：2022-01-19 06:27:54
【问题描述】：

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

DEMO.

这是我想要触发伪元素动画的代码，但点击后什么也没有发生。

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

DEMO

【问题讨论】：

标签： javascript jquery animation

【解决方案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;
}

注意：您可以使用空格切换多个类。

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

【讨论】：

非常感谢，我一直在努力解决这些问题。
欢迎您 :) 如果您愿意，可以为我的答案投票 :)
我没有15声望哈哈抱歉。
@Xenodo 现在你得到它们了，哈哈