Question

我正在使用CCS3过渡创建一个滑动菜单面板。索引面板会滑入但不会滑出，其他面板根本不会显示动画。

JavaScript存在问题或CSS遗漏了什么？

＆＃13;

$(function() {
	$('.side-panel-index a').on('click', function() {
		var panelId = $(this).data('panel-id');
		$('.side-panel-index').addClass('side-panel-index-disabled');
		$('#' + panelId).addClass('side-panel-active');
	});
	
	$('.side-panel h3').on('click', function() {
		$('.side-panel-index').removeClass('side-panel-index-disabled');
		$('.side-panel').removeClass('side-panel-active');
	});
});

＆＃13;

.page-sidebar {
	position: fixed;
	top: 20px;
	bottom: 20px;
	right: 20px;
	width: 100%;
	max-width: 320px;
	background-color: #eee;
	border-radius: 3px;
	overflow: hidden;
}
.side-panel-header {
	border-bottom: 1px solid #fff;
	height: 60px;
}
.side-panel-header h3 {
	padding: 0 20px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 60px;
}

.side-panel-content {
	padding: 20px;
}
.side-panel-index .side-panel-content {
	padding: 0;
}
.side-panel-content ul {
	list-style-type: none;
	font-size: 14px;
	margin: 0;
	padding: 0;
}
.side-panel-content ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ebeef0;
}
.side-panel-content ul li a {
  display: block;
	color: #31373d;
  padding: 10px 20px;
	line-height: 20px;
	cursor: pointer;
}
.side-panel-content ul li a:hover {
	text-decoration: none;
	background-color: #eff9fd;
	box-shadow: 0 1px 0 #ebeef0;
}
.side-panel {
	display: none;
	position: absolute;
	width: 100%;
	height: calc(100% - 60px);
	background: #eee;
	overflow: hidden;
	z-index: 1;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
	-moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.side-panel-index {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.side-panel-active, .side-panel-index {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	display: block;
	opacity: 1;
}
.side-panel-index-disabled {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page-sidebar">
<div class="side-panel side-panel-index">
	<div class="side-panel-header">
		  <h3>Settings</h3>
	</div>
	<div class="side-panel-content">
		<ul>
			<li title="Welcome">
				<a data-panel-id="panel-1">Welcome</a>
			</li>
			<li title="General">
				<a data-panel-id="panel-2">						General</a>
			</li>    			<li title="Timing">
				<a data-panel-id="panel-3">Timing</a>
			</li>
			<li title="Visibility">
				<a data-panel-id="panel-4">Visibility</a>
			</li>
			<li title="Colors">
				<a data-panel-id="panel-5">Colors</a>
			</li>
			<li title="Design">
				<a data-panel-id="panel-6">Design</a>
			</li>
			<li title="Position">
				<a data-panel-id="panel-7">Position</a>
			</li>
		</ul>
	</div>	
</div>
<form id="panels">
	<div id="panel-1" class="side-panel">
		<div class="side-panel-header">
			<h3>< back Welcome</h3>
		</div>
		<div class="side-panel-content">
			Welcome panel
		</div>
	</div>
	<div id="panel-2" class="side-panel">
		<div class="side-panel-header">
			<h3>< back General</h3>
		</div>
		<div class="side-panel-content">
			General panel
		</div>
	</div>
	<div id="panel-3" class="side-panel">
		<div class="side-panel-header">
			<h3>< back Timing</h3>
		</div>
		<div class="side-panel-content">
			Timing panel
		</div>
	</div>
	<div id="panel-4" class="side-panel">
		<div class="side-panel-header">
			<h3>< back Visibility</h3>
		</div>
		<div class="side-panel-content">
			Visibility panel
		</div>
	</div>
	<div id="panel-5" class="side-panel">
		<div class="side-panel-header">
			<h3>< back Colors</h3>
		</div>
		<div class="side-panel-content">
			Colors panel
		</div>
	</div>
	<div id="panel-6" class="side-panel">
		<div class="side-panel-header">
			<h3>< back  Design</h3>
		</div>
		<div class="side-panel-content">
			Design panel
		</div>
	</div>
	<div id="panel-7" class="side-panel">
		<div class="side-panel-header">
			<h3>< back Position</h3>
		</div>
	<div class="side-panel-content">
		Position panel
	</div>
	</div>
</form>
</div>

＆＃13;

Answer 1

它的工作原理如下：

exe

你无法进行侧面显示：无，然后在转换时添加display：block，它最终会隐藏动画，因为外观以与幻灯片相同的速率进行动画制作。只需始终为侧面板制作显示样式块，并将其从侧面板活动和侧面板索引中取出。

CSS3动画只能单向工作

1 个答案: