时间戳

首页 > 解决方案 > 如何在隐藏的 DIV 中保持 CSS 动画播放

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

问题描述

我有一个 div 包含一个按钮，上面有一些继续动画，而不仅仅是悬停，整个按钮只是动画。然后我在它下面有一个“加载更多”按钮，使用 JavaScript 它将加载包含完全相同按钮（带有动画）的下一个 div。问题是由于第二个 div 是 display:none 直到单击加载更多按钮，动画在单击加载更多按钮时开始，因此与其上方相同按钮的动画不一致。我想问题是，如何让我的 CSS 动画在 display:none div 的背景中播放，以便在加载动画时同时开始并匹配显示的按钮？

这是问题发生位置的直接链接，请单击 LOAD MORE 并注意 CSS 动画中发生的差异：LINK TO ISSUE (LIVE)

请看上面的链接 // 前 4 个按钮设置为可见，所以它们上面的 CSS 动画是一致的。当我单击 LOAD MORE 时，第 5 个按钮在 div 中显示：none 现在可见，但在不同时间启动 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 类使用 opacity 0 ，它会将它们全部隐藏！

标签： javascriptcss

解决方案

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

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

推荐阅读