如何使用CSS将过渡应用于下一张幻灯片

Question

我正在构建一个测验，该测验将由许多幻灯片组成，而在幻灯片之间使用我想要应用类似于此站点的过渡效果，下一张卡片略微插入其中。

我已经尝试在.active类上应用过渡，但这似乎没有任何影响。

CodePen

HTML：

      <div class="row main-row align-items-center diagonal-stripe-1">
         <div class="col d-flex justify-content-center">

            <div class="card card1 w-50 active">
               <div class="card-body text-center">
                  <h5 class="card-title">Questionnaire</h5>
                  <p class="card-text">This is some example text to show on landing page for questionnaire.</p>
                  <a href="#" class="btn btn-primary first-btn">Get Started</a>
               </div>
            </div>

            <div class="card card2 w-50">
               <div class="card-body text-center">
                  <h5 class="card-title">Next Question Goes Here</h5>
                  <p class="card-text">This is some example text to show on landing page for questionnaire.</p>
                  <a href="#" class="btn btn-primary">Get Started</a>
               </div>
            </div>

         </div>
      </div>

   </div>

CSS：

.main-row {
  /*border: 1px solid red;*/
  height: 80vh;
}

.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }

/* CARD STYLES */
.card {
  display: none;
  margin-left: 50px;
}

.card.active {
  display: block;
  margin-left: 0px;
  transition: 2s;
  /*transform:translate(0);*/
}

JS：

$(document).ready(function() {
   $( ".first-btn" ).click(function() {
      console.log( "Handler for .click() called." );
      $(".card1").toggleClass('active');
      $(".card2").toggleClass('active');
   });
});

Answer 1

您想使用错误的属性

transition-duration: 2s;

但这属于.card，因此它看起来像这样：

.card {
  display: none;
  margin-left: 50px;
  transition-duration: 2s;
}

.card.active {
  display: block;
  margin-left: 0px;
  /*transform:translate(0);*/
  //more .active css...
}

这是更多信息https://www.w3schools.com/csSref/css3_pr_transition-duration.asp

Answer 2

这是因为您的活动卡没有显示，我试图先显示您的card2然后将setTimeout调用到toggleClass ，并且它的工作原理是：

 $(document).ready(function() { $( ".first-btn" ).on('click', function() { $(".card1").toggleClass('active'); $(".card2").show(); setTimeout(() => { $(".card2").toggleClass('active'); }, 10) }); }); 

 .main-row { /*border: 1px solid red;*/ height: 80vh; } .diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; } /* CARD STYLES */ .card { display: none; margin-left: 50px; } .card.active { transition: all 1s ease-in-out; display: block; margin-left: 0px; /*transform:translate(0);*/ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row main-row align-items-center diagonal-stripe-1"> <div class="col d-flex justify-content-center"> <div class="card card1 w-50 active"> <div class="card-body text-center"> <h5 class="card-title">Questionnaire</h5> <p class="card-text">This is some example text to show on landing page for questionnaire.</p> <a href="#" class="btn btn-primary first-btn">Get Started</a> </div> </div> <div class="card card2 w-50"> <div class="card-body text-center"> <h5 class="card-title">Next Question Goes Here</h5> <p class="card-text">This is some example text to show on landing page for questionnaire.</p> <a href="#" class="btn btn-primary">Get Started</a> </div> </div> </div> </div> </div> 

Answer 3

我相信这是您所缺少的：

.card.active {
  display: block;
  margin-left: 0px;
  -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;
}
@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}

您可以检查以下小提琴或检查代码笔叉 ：

 $(document).ready(function() { $( ".first-btn" ).click(function() { console.log( "Handler for .click() called." ); $(".card1").toggleClass('active'); $(".card2").toggleClass('active'); }); }); 

 .main-row { /*border: 1px solid red;*/ height: 80vh; } .diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; } /* CARD STYLES */ .card { display: none; margin-left: 50px; } .card.active { display: block; margin-left: 0px; -webkit-animation: slideIn 2s forwards; -moz-animation: slideIn 2s forwards; animation: slideIn 2s forwards; /*transform:translate(0);*/ } @-webkit-keyframes slideIn { 0% { transform: translateX(-900px); } 100% { transform: translateX(0); } } @-moz-keyframes slideIn { 0% { transform: translateX(-900px); } 100% { transform: translateX(0); } } @keyframes slideIn { 0% { transform: translateX(-900px); } 100% { transform: translateX(0); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row main-row align-items-center diagonal-stripe-1"> <div class="col d-flex justify-content-center"> <div class="card card1 w-50 active"> <div class="card-body text-center"> <h5 class="card-title">Questionnaire</h5> <p class="card-text">This is some example text to show on landing page for questionnaire.</p> <a href="#" class="btn btn-primary first-btn">Get Started</a> </div> </div> <div class="card card2 w-50"> <div class="card-body text-center"> <h5 class="card-title">Next Question Goes Here</h5> <p class="card-text">This is some example text to show on landing page for questionnaire.</p> <a href="#" class="btn btn-primary">Get Started</a> </div> </div> </div> </div> </div> 

有关CSS 动画和过渡的更多详细信息，请参见链接