由jQuery控件触发的CSS转换发生在一个方向,而不是另一个方向

时间:2016-01-11 18:52:16

标签: jquery html css css3 css-transitions

我查看了几个类似的问题,但找不到与我所做的完全匹配的任何事情。

我正在使用一个简单的全屏面板滑块。单击左键可完美触发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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

更改这些样式

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

您正在混合使用左右属性来定位元素,然后无法正确转换

codepen