Question

我正在构建一个测验，该测验将包含许多幻灯片，而在幻灯片之间切换时，我想应用类似于this site的过渡方式，其中下一张卡片会稍微滑入。

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

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);
  }
}

您可以检查以下小提琴或检查codepen fork：

$(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 Animations和Transitions

的更多详细信息，请参见链接

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

3 个答案: