CSS 由 jQuery 控件触发的转换发生在一个方向，但不发生在另一个方向

Question

我查看了几个类似的问题，但找不到任何与我正在做的完全匹配的问题。

我正在开发一个简单的全屏面板滑块。单击左键会完美触发 CSS 过渡，但单击右键会立即跳到下一张幻灯片。对于我的生活，我无法弄清楚为什么。

Here is a codepen with a stripped down version of the problem. 谁能看出我做错了什么？

$( document ).ready(function() {

 $('.panel-controls .right').click(function(){
  $(event.target).closest('.block').find('.current').next().addClass('bridge');
  $(event.target).closest('.block').find('.current').removeClass('current').addClass('hidden-left');
  $(event.target).closest('.block').find('.bridge.hidden-right').addClass('current').removeClass('hidden-right bridge');
 });
 
 $('.panel-controls .left').click(function(){
  $(event.target).closest('.block').find('.current').prev().addClass('bridge');
  $(event.target).closest('.block').find('.current').removeClass('current').addClass('hidden-right');
  $(event.target).closest('.block').find('.bridge.hidden-left').addClass('current').removeClass('hidden-left bridge');
 });
});

@mixin transition($what:all, $when:1s, $how:ease-in-out) {
 transition: $what $when $how;
}

@mixin vcenter {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

.div { box-sizing: border-box; } //everything border-box by default

.block {
 position: relative;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 .panel-controls {
  z-index: 500;
  @include vcenter;
  .left, .right {
   width: 50px;
   height: 50px;
   background-color: rgba(#000, .5);
   color: #fff;
   text-align: center;
   padding-top: 30px;
   cursor: pointer;
  }
  .left { float: left; }
  .right { float: right; }
 }
 .panel {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  @include transition;
 }
 .panel.current {
  left: 0vw;
  right: 0vw;
 }
 .panel.hidden-right {
  right: -100vw;
 }
 .panel.hidden-left {
  left: -100vw;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="block">
 <div class="panel-controls">
  <div class="left">&lt;</div>
  <div class="right">&gt;</div>
 </div>
 <div class="panel p1 hidden-left" style="background-image: url(http://i.imgur.com/mNlPJ8k.jpg);"></div>
 <div class="panel p2 hidden-left" style="background-image: url(http://i.imgur.com/samQF6k.jpg);"></div>
 <div class="panel p3 hidden-left" style="background-image: url(http://i.imgur.com/AbxHQUq.jpg);"></div>
 <div class="panel p4 current" style="background-image: url(http://i.imgur.com/6V4pI7q.jpg);"></div>
 <div class="panel p5 hidden-right" style="background-image: url(http://i.imgur.com/1xkwCNN.jpg);"></div>
 <div class="panel p6 hidden-right" style="background-image: url(http://i.imgur.com/tnUALvn.jpg);"></div>
 <div class="panel p7 hidden-right" style="background-image: url(http://i.imgur.com/6V4pI7q.jpg);"></div>
</section>

Answer 1

更改这些样式

.panel.current {
    left: 0vw; 
}
.panel.hidden-right {
    left: 100vw;
}
.panel.hidden-left {
    left: -100vw;
}

您混合了左右属性来定位您的元素，然后您无法正确过渡它

codepen

CSS 由 jQuery 控件触发的转换发生在一个方向，但不发生在另一个方向

CSS transition triggered by jQuery controls occurs one direction, but not the other

html

css

jquery

css-transitions