Question

我想像使用网络CSS一样使用原生感觉进行导航。但我坚持把我的.content幻灯片带回左边。尝试点击该项目，然后点击后面，你会发现我的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在css转换有时间完成之前，您正在隐藏.content div。

从.hide()点击方式中删除#back。

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

然后

绑定到css转换结束事件，以仅为后退事件隐藏.content div。我们将使用.once。如果您最终执行多级/深度“幻灯片”，则可能希望每次都使用.on然后.off。

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

<强> JS FIDDLE DEMO

像使用css和js的导航一样原生

1 个答案: