CODEWITHSUNDEEP
jquerycss
joe
joe

Reputation: 1135

Sidebar should slide out in same motion as slide in

CSS

#overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index:-1;
    opacity: 0;
    visibility:hidden;
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
.sidePanelOpen #overlay{
    opacity:1;
    visibility:visible;
    z-index: 9000;
}

.sidebar-panel{
    width: 440px;
    position: fixed;
    top: 0;
    bottom: 0;
    right:-100%;
    background: #f9f9f9;
    padding: 35px;
    z-index: 9100;
    overflow-y: auto;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
  -webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo
}
.sidePanelOpen .sidebar-panel{
    right:0;
}

JQuery

$('.icon-btn').on('click', function() {
    $('body').addClass('sidePanelOpen');

});
$('#overlay').on('click', function() {
    $('body').removeClass('sidePanelOpen');
});

HTML

<div class="sidebar-panel">
  <div>
    <div style="border: 1px solid #eee;">
      test
    </div>
  </div>
</div>

DEMO Jsfiddle

The issue is: 1. when click icon, the sidebar will slide in slow - correct as in transition 2. when close overlay, the sidebar slides out too fast - which is not correct.

The sidebar should slide in and out in same motion (see transition css above). I tried to add transition to .sidePanelOpen .sidebar-panel{} but on click overlay, the sidebar still slide out too fast.

How to make sidebar slide in and out in same motion?

Upvotes: 1

Views: 291

Answers (1)

ofer dofer
ofer dofer

Reputation: 621

Actually they're the same but you can't notice it because easeOutExpo gives a fast start and slow end. Use easeInOutExpo instead with the array of: 

cubic-bezier(1, 0, 0, 1);

Click here to go the updated fiddle. All you should do now is to set the timing as you pleease.

Upvotes: 2

Related Questions