（5x）卡的旋转得到了奇怪的双旋转效果

Question

我用Javascript和CSS3设置CSS类转换（旋转）使卡片旋转，并且在每次旋转后尝试重置样式时，它在第二次旋转后给我一个奇怪的双旋转效果，所以类推。

实际进行切换的代码是：

currentWidget.addClass('rotatefront');
prevWidget.addClass('rotateback');

以及混淆它的代码必须是这样的（在设置新内容之前重置所有小部件）：

$('.rotatefront').removeClass('rotatefront');
$('.rotateback').removeClass('rotateback');

因为那似乎又做了另一次轮换，我不知道如何更好地做到这一点。

这是轮班：

#card {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000;
    position: relative;
}   
.back, .front {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 1s ease-in;
}
.back {
    -webkit-transform: rotateY(180deg);
}   
.front {
}
#card-container {
    display: inline-block;
    text-align: justify;
}   
.rotateback {   
    -webkit-transform: rotateY(0deg);
}
.rotatefront {      
    -webkit-transform: rotateY(-180deg);
}

工作JSFiddle的链接是here

Answer 1

对于有问题的代码行，你是对的。确实有以下两行：

$('.rotatefront').removeClass('rotatefront');
$('.rotateback').removeClass('rotateback');

问题的原因是因为您尝试从具有该类的所有元素中删除.rotatefront类（并且同样使用rotateback类）。当您删除rotatefront或rotateback课程时，您实际上会删除已应用的transform课程。具有rotatefront或rotateback类的所有元素也具有front或back类（因此也指定了transition属性） 。此transition设置导致transform的移除也正在转变。

对于第一次迭代，没有rotatefront或rotateback类的元素。这意味着什么都没有被删除，因此它不会导致任何问题。从第二个（以及后续点击）开始，您有一个带有rotateback类的元素（其类即将被删除），一个或多个带有rotatefront类的元素（其类也将被删除）因此，这些元素中的每一个都从当前状态转变为未来状态。这使得它看起来好像导致了双重旋转，但它实际上是同时转换的多个元素。

如何解决这个问题？

您实际上不必从所有元素中删除类以使翻转效果正常工作。您只需要从当前小部件中删除rotateback类，并将rotatefront类添加到其中，如下面的代码段所示。

currentWidget.removeClass('rotateback').addClass('rotatefront');
nextWidget.addClass('rotateback');

如何转换按钮及其框？

您可以根据需要为这些按钮分配front或back类，使按钮也随其框一起过渡。

/* to hide/show transition the buttons */
currentWidget.find('.rightnav, .leftnav').toggleClass('back front');
nextWidget.find('.rightnav, .leftnav').toggleClass('back front');

$(document.body).on('click', '.rightnav.front', function() {
  var currentWidget = $(this).parent().parent();
  var nextId = Number($(this).attr('id'));
  var nextWidget = $('#' + nextId + '.widget');
  currentWidget.removeClass('rotateback').addClass('rotatefront');
  nextWidget.addClass('rotateback');
  var nextWidgetLink = nextWidget.find('.rightnav');

  currentWidget.addClass('back').removeClass('rotateback').removeClass('front');
  nextWidget.addClass('front').removeClass('rotatefront').removeClass('back');

  /* to hide/show transition the buttons */
  currentWidget.find('.rightnav, .leftnav').toggleClass('back front');
  nextWidget.find('.rightnav, .leftnav').toggleClass('back front');
});

$(document.body).on('click', '.leftnav.front', function() {
  var currentWidget = $(this).parent().parent();
  var prevId = Number($(this).attr('id'));
  var prevWidget = $('#' + prevId + '.widget');
  currentWidget.removeClass('rotateback').addClass('rotatefront');
  prevWidget.addClass('rotateback');
  var prevWidgetLink = prevWidget.find('.rightnav');
  currentWidget.addClass('back').removeClass('rotateback').removeClass('front');
  prevWidget.addClass('front').removeClass('rotatefront').removeClass('back');

  /* to hide/show transition the buttons */
  currentWidget.find('.rightnav, .leftnav').toggleClass('back front');
  prevWidget.find('.rightnav, .leftnav').toggleClass('back front');
});

#card {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  position: relative;
}
.back,
.front {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in;
}
.back {
  -webkit-transform: rotateY(180deg);
}
.front {} 
#card-container {
  display: inline-block;
  text-align: justify;
}
.rotateback {
  -webkit-transform: rotateY(0deg);
}
.rotatefront {
  -webkit-transform: rotateY(-180deg);
}
.widget {
  z-index: 9999;
  position: absolute;
  top: 60px;
  width: 100%;
}
.widget-head {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  width: 100%;
  background-color: #e7e5e5;
  position: relative;
  border-bottom: 1px solid #bcbbbb;
  border-left: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
}
.widget-head h1 {
  text-align: center;
  font-size: 130%;
  color: #00468e;
  line-height: 1.2em;
  margin: 0.0em 0;
  padding: 8px;
  text-transform: uppercase;
  font-weight: bold;
}
.widget-head .rightnav {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 5px;
  right: 3px;
}
.widget-head .leftnav {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
}
.widget-body {
  min-height: 250px;
  width: 100%;
  background-color: #eeeeee;
}
.widget-body p {
  color: #000;
  font-size: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 15px;
  margin-top: 0em;
  margin-bottom: -1.4em;
}
.widget-body p span {
  font-size: 110%;
  color: #3b3b3b;
  font-weight: bold;
}
.widget-body p:last-child {
  margin-bottom: 0;
}
.widget-footer {
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  min-height: 30px;
  background-color: #e7e5e5;
  border-top: 1px dashed #bcbbbb;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.widget-footer p {
  color: #6e6e6e;
  padding: 5px;
  font-size: 85%;
  line-height: 1.2em;
  margin: 0.0em 0;
  padding: 8px;
  text-align: right;
}
.widget-content-block {
  font-size: 100%;
  line-height: 1.2em;
  padding: 15px;
}
.widget-content-header {
  font-size: 110%;
  color: #3b3b3b;
  font-weight: bold;
  text-decoration: underline;
}
.rotateback .rightnav[id='0'],
.rotateback .leftnav[id='0'] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="2" class="widget front">
  <div class="widget-head ">
    <h1>Kontakt</h1>
    <div class="leftnav front" style="display:none" id="0">
      <img src="Content/Images/arrow-button-left.png" class="slide-left">
    </div>
    <div class="rightnav front" id="3">
      <img src="Content/Images/arrow-button-right.png" class="slide-right">
    </div>
  </div>
  <div class="widget-body">
    <p><span>Yngres</span><span>Yngres avdeling</span>
    </p>
    <p>Bla-bla-bla-bla-bla-bla-bla-</p>
  </div>
  <div class="widget-footer">
    <p>Les mer...</p>
  </div>
</div>
<div id="3" class="widget back">
  <div class="widget-head ">
    <h1>Kontakt</h1>
    <div class="leftnav back" id="2">
      <img src="Content/Images/arrow-button-left.png" class="slide-left">
    </div>
    <div class="rightnav back" id="4">
      <img src="Content/Images/arrow-button-right.png" class="slide-right">
    </div>
  </div>
  <div class="widget-body">
    <p><span>Jenter Junior</span><span>Jenter mellom 12 og 18 år</span>
    </p>
    <p>Bla-bla-bla-bla-bla-bla-bla-</p>
  </div>
  <div class="widget-footer">
    <p>Les mer...</p>
  </div>
</div>
<div id="4" class="widget back">
  <div class="widget-head ">
    <h1>Kontakt</h1>
    <div class="leftnav back" id="3">
      <img src="Content/Images/arrow-button-left.png" class="slide-left">
    </div>
    <div class="rightnav back" id="5">
      <img src="Content/Images/arrow-button-right.png" class="slide-right">
    </div>
  </div>
  <div class="widget-body">
    <p><span>Herrer Elite</span><span>Elite serie lag for Herrer</span>
    </p>
    <p>Bla-bla-bla-bla-bla-bla-bla-</p>
  </div>
  <div class="widget-footer">
    <p>Les mer...</p>
  </div>
</div>
<div id="5" class="widget back">
  <div class="widget-head ">
    <h1>Kontakt</h1>
    <div class="leftnav back" id="4">
      <img src="Content/Images/arrow-button-left.png" class="slide-left">
    </div>
    <div class="rightnav back" id="0">
      <img src="Content/Images/arrow-button-right.png" class="slide-right">
    </div>
  </div>
  <div class="widget-body">
    <p><span>Damer Elite</span><span>Damer Elite Ja...</span>
    </p>
    <p>Bla-bla-bla-bla-bla-bla-bla-</p>
  </div>
  <div class="widget-footer">
    <p>Les mer...</p>
  </div>
</div>

jQuery代码看起来非常冗长，其中一些代码可以用不同的方式编写。其中一个就是取消if{} else{}循环并在CSS中添加以下代码以完全相同。

.rotateback .rightnav[id = '0'], .rotateback .leftnav[id = '0']{
  display: none;
}

我已经在上面的代码片段中进行了此更改，但将剩下的部分留给您。