如何在隐藏的DIV中保持CSS动画播放

Question

我有一个div，它包含一个按钮，上面有一些连续的动画，而不仅仅是悬停时，整个按钮都是动画。然后我有一个"；LOAD MORE"；按钮，使用JavaScript加载下一个div，该div包含完全相同的按钮(带有动画(。问题是因为第二个div是显示的：在点击加载更多按钮之前没有，动画在点击加载更按钮时开始，因此与上面同一按钮的动画不一致。我想问题是，我如何让我的CSS动画在display:nonediv的背景中播放，以便在加载时动画同时启动并与显示的按钮匹配？

这里有一个直接链接到问题发生的地方，请单击"加载更多"并注意CSS动画中发生的差异：链接到问题(实时(

请参阅上面的链接//前4个按钮被设置为可见，因此它们上的CSS动画是一致的。当我点击LOAD MORE时，带有的第五个按钮在div中显示：现在没有一个是可见的，但在不同的时间启动CSS动画！！如何同时加载？

$(document).ready(function() {
$(".content").slice(0, 4).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:hidden").slice(0, 1).slideDown();
if ($(".content:hidden").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})

* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
display: none;
}
#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}

/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
@keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
@keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
@keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
@keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>

<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
<a href="#" id="loadMore">Load More</a>
</div>
</div>

上面是我正在使用的JS，所以它基本上显示了前4个，然后加载其余的。如果我对.content类使用不透明度0，它会将它们全部隐藏！！

Answer 1

我已经使用一个类重新实现了，所以现在元素一直在页面上，但只在点击时显示。我已经尽可能多地留下了原始代码。

$(document).ready(function() {
$(".content").slice(0, 4).addClass('show');
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:not(.show)").slice(0, 1).addClass('show').slideDown();
if ($(".content.show").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})

* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
width:0px;
height:0px;
}
.content a {
padding: 0;
}
.show {
width:unset;
height:unset;
}
.content.show a {
padding: 20px 40px;
}

#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}

/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
@keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
@keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
@keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
@keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>

<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>

<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
<a href="#" id="loadMore">Load More</a>
</div>
</div>