CSS3 动画仅在单个方向上工作

Question

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

是 JavaScript 的问题还是 CSS 缺少什么？

http://codepen.io/anon/pen/aZdgxQ

$(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');
	});
});

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

<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>

Answer 1

它的工作原理是这样的：

        .side-panel {
            display: block;
            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%);
            opacity: 1;
        }

您不能制作侧面板显示：无，然后在过渡上添加显示：块，它最终会隐藏动画，因为外观以与幻灯片相同的速率进行动画处理。 只需始终为侧面板制作显示样式块，并将其从侧面板活动和侧面板索引中取出即可。