Asa Carter Asa Carter - 5 months ago 9
jQuery Question

CSS3 animation only working in single direction

I am creating a sliding menu panel using CCS3 transitions. The index panel slides in but not out and the other panels do not animate in or out at all.

Is the problem with the JavaScript or is the CSS missing something?

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

It works like this:

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

You can't make side-panel display: none and then add display: block on the transition, it ends up hiding the animation since the appearance animates at the same rate as the slide. Just always make the display style block for the side-panels and take it away from side-panel-active and side-panel-index.

Comments