0
私はCCS3トランジションを使用してスライドメニューパネルを作成しています。インデックスパネルはスライドしますが、スライドしません。他のパネルはまったくアニメーション化されません。CSS3アニメーションは片方向でしか動作しません
JavaScriptに問題がありますか、CSSに何か不足していますか？
http://codepen.io/anon/pen/aZdgxQ
$(function() {
\t $('.side-panel-index a').on('click', function() {
\t \t var panelId = $(this).data('panel-id');
\t \t $('.side-panel-index').addClass('side-panel-index-disabled');
\t \t $('#' + panelId).addClass('side-panel-active');
\t });
\t
\t $('.side-panel h3').on('click', function() {
\t \t $('.side-panel-index').removeClass('side-panel-index-disabled');
\t \t $('.side-panel').removeClass('side-panel-active');
\t });
});.page-sidebar {
\t position: fixed;
\t top: 20px;
\t bottom: 20px;
\t right: 20px;
\t width: 100%;
\t max-width: 320px;
\t background-color: #eee;
\t border-radius: 3px;
\t overflow: hidden;
}
.side-panel-header {
\t border-bottom: 1px solid #fff;
\t height: 60px;
}
.side-panel-header h3 {
\t padding: 0 20px;
\t margin: 0;
\t font-size: 18px;
\t font-weight: 600;
\t line-height: 60px;
}
.side-panel-content {
\t padding: 20px;
}
.side-panel-index .side-panel-content {
\t padding: 0;
}
.side-panel-content ul {
\t list-style-type: none;
\t font-size: 14px;
\t margin: 0;
\t padding: 0;
}
.side-panel-content ul li {
\t margin: 0;
\t padding: 0;
\t border-bottom: 1px solid #ebeef0;
}
.side-panel-content ul li a {
display: block;
\t color: #31373d;
padding: 10px 20px;
\t line-height: 20px;
\t cursor: pointer;
}
.side-panel-content ul li a:hover {
\t text-decoration: none;
\t background-color: #eff9fd;
\t box-shadow: 0 1px 0 #ebeef0;
}
.side-panel {
\t display: none;
\t position: absolute;
\t width: 100%;
\t height: calc(100% - 60px);
\t background: #eee;
\t overflow: hidden;
\t z-index: 1;
\t -webkit-transform: translateX(100%);
\t -moz-transform: translateX(100%);
\t transform: translateX(100%);
\t -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
\t -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
\t transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.side-panel-index {
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
}
.side-panel-active, .side-panel-index {
\t -webkit-transform: translateX(0);
\t -moz-transform: translateX(0);
\t transform: translateX(0);
\t display: block;
\t opacity: 1;
}
.side-panel-index-disabled {
\t -webkit-transform: translateX(-100%);
\t -moz-transform: translateX(-100%);
\t transform: translateX(-100%);
\t 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">
\t <div class="side-panel-header">
\t \t <h3>Settings</h3>
\t </div>
\t <div class="side-panel-content">
\t \t <ul>
\t \t \t <li title="Welcome">
\t \t \t \t <a data-panel-id="panel-1">Welcome</a>
\t \t \t </li>
\t \t \t <li title="General">
\t \t \t \t <a data-panel-id="panel-2"> \t \t \t \t \t \t General</a>
\t \t \t </li> \t \t \t <li title="Timing">
\t \t \t \t <a data-panel-id="panel-3">Timing</a>
\t \t \t </li>
\t \t \t <li title="Visibility">
\t \t \t \t <a data-panel-id="panel-4">Visibility</a>
\t \t \t </li>
\t \t \t <li title="Colors">
\t \t \t \t <a data-panel-id="panel-5">Colors</a>
\t \t \t </li>
\t \t \t <li title="Design">
\t \t \t \t <a data-panel-id="panel-6">Design</a>
\t \t \t </li>
\t \t \t <li title="Position">
\t \t \t \t <a data-panel-id="panel-7">Position</a>
\t \t \t </li>
\t \t </ul>
\t </div> \t
</div>
<form id="panels">
\t <div id="panel-1" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Welcome</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t Welcome panel
\t \t </div>
\t </div>
\t <div id="panel-2" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back General</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t General panel
\t \t </div>
\t </div>
\t <div id="panel-3" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Timing</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t Timing panel
\t \t </div>
\t </div>
\t <div id="panel-4" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Visibility</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t Visibility panel
\t \t </div>
\t </div>
\t <div id="panel-5" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Colors</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t Colors panel
\t \t </div>
\t </div>
\t <div id="panel-6" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Design</h3>
\t \t </div>
\t \t <div class="side-panel-content">
\t \t \t Design panel
\t \t </div>
\t </div>
\t <div id="panel-7" class="side-panel">
\t \t <div class="side-panel-header">
\t \t \t <h3>< back Position</h3>
\t \t </div>
\t <div class="side-panel-content">
\t \t Position panel
\t </div>
\t </div>
</form>
</div>