0

http://jsfiddle.net/q1a4wwar/7/

I want to do like native feel kind of navigation using web css. But I stuck at bringing back my .content slide back to the left. Try click on the item and then click on the back, you will notice my problem there.

$(function(){
    $('.item').on('click', function(){
        $(this).addClass('slideLeftItem');
        $('.content').show(0,'', function(){
            $('#back').show();
        }).addClass('slideRightContent');
    });
    
    $('#back').on('click',function(){
        
        $('.item').show().removeClass('slideLeftItem');
        $(this).hide();
        $('.content').hide().removeClass('slideRightContent');
    });
});
.content{
    display:none;
    position: absolute;
right: -200px;
top: 0px;
background: blue;
transition: 0.4s;
}

.item{
position: absolute;
left: 0;
top: 0px;
transition: 0.4s;
}

.slideRightContent{
    right: 0px;
}


.slideLeftItem{
    left: -200px;
}

#back{
    display:none;
    height: 20px !Important;
    background: grey !Important;

}

.content, .item{
    width:200px;
    height: 200px;
    background: red;
}

.phone{
  position: relative;
  overflow: hidden;
  transition: 0.4s;
   width:200px;
    border: 10px solid #000;
    height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back">< back</div>


<br>
<div class="phone">
    
<div class="item">item</div>
<div class="content">My content</div>
    
</div>
John St
  • 269
  • 3
  • 9
  • It is not very clear, what do you exactly mean by "native like". E.g. there are multiple approaches to easing -in or -out the animations. Do you have a device or web UI experience in mind that you want to replicate. If so, please update your question. – Alex Pakka Jan 14 '15 at 05:01
  • @AlexPakka try to click the result up there, u didn't notice something is missing? – John St Jan 14 '15 at 05:12
  • there is a white thing there when u click back – John St Jan 14 '15 at 05:12

1 Answers1

0

You are hiding the .content div before the css transition has time to complete.

remove .hide() from the #back click method.

$('.content').removeClass('slideRightContent');

then bind to the css transition end event to hide the .content div for only the back event. We will use .once for this. IF you end up doing multi level/depth "slides" you may instead want to use .on and then .off each time.

$('.content').removeClass('slideRightContent').once('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
         $(this).hide();
    });
});

JS FIDDLE DEMO

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • do I really need these transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd ?? – John St Jan 14 '15 at 06:41
  • it is for cross browser compatibility.. as not all browsers trigger the same css transition end event.. see this answer that quotes modernizr's event listening http://stackoverflow.com/a/9090128/648350 – haxxxton Jan 14 '15 at 06:44