（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 类添加到其中，如下面的 sn-p 所示。

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

我已经在上面的 sn-p 中进行了这个更改，但剩下的留给你。