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

Question

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

实际进行切换的代码是：

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

Link 工作 JSFiddle 是 here

Answer 1

您对有问题的代码行的看法是正确的。确实是下面两行：

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

问题的原因是因为您试图从所有具有 class 的元素中删除 .rotatefront class（与 rotateback [=69 相同） =] 还有）。当您删除 rotatefront 或 rotateback class 时，您实际上是在删除应用在其上的 transform。所有具有 rotatefront 或 rotateback class 的元素也具有 front 或 back class（因此具有 transition 属性也指定）。此 transition 设置导致 transform 的删除也正在转换。

对于第一次迭代，没有包含 rotatefront 或 rotateback class 的元素。这意味着实际上没有任何东西被移除，因此不会造成任何问题。从第二次（以及随后的点击）开始，您有一个元素带有 rotateback class（其 class 即将被删除），一个或多个元素带有 rotatefront class（其 class 也将被删除），因此这些元素中的每一个都从当前状态过渡到未来状态。这使得它看起来好像在造成双重旋转，但实际上是多个元素同时过渡。

如何解决？

您实际上不必从所有元素中删除 classes 即可使翻转效果正常工作。您只需要从当前小部件中删除 rotateback class 并向其添加 rotatefront class ，就像下面的代码片段一样。

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

如何转换按钮及其框？

您可以根据需要为按钮分配 front 或 back class，从而使按钮也与其框一起过渡。

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

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

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

Rotate of (5x) cards got weird double rotate effect

html

css

jquery

css-transitions

css-transforms