旋转(5倍)卡得到奇怪的双旋转效果

Question

我用Javascript和CSS3变换(旋转)设置CSS类，使卡片旋转，当试图在每次旋转后重置样式时，它在第二次旋转后给了我一个奇怪的双重旋转效果，等等。

实际执行切换的代码是:

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

和把它弄乱的代码必须是这样的(在设置new之前重置所有小部件):

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

因为这似乎又做了一次旋转，我不知道如何更好地做到这一点。

这是rotationclasses:

#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在这里

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

我已经在上面的代码片段中做了这个修改，但是剩下的就留给你了。