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

Question

我浏览了几个类似的问题，但找不到任何与我正在做的事情完全匹配的内容。

我正在开发一个简单的全屏面板 slider 。单击左侧按钮可以完美触发 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