原生的，比如使用 css 和 js 的导航

Native like navigation using css and js

本文关键字：css 导航 js 原生      更新时间：2023-09-26

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

我想像使用网络 css 进行原生感觉的导航。但我坚持将我的 .content 幻灯片带回左边。尝试单击该项目，然后单击背面，您会注意到我的问题。

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

在 css 转换有时间完成之前，您隐藏了.contentdiv。

从#back单击方法中删除.hide()。

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

然后绑定到 CSS 转换结束事件以仅隐藏 BACK 事件的.contentdiv。我们将为此使用.once。如果你最终做了多层次/深度的"幻灯片"，你可能想使用.on然后每次都.off。

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

JS小提琴演示

相关文章：