jquery - Canvas 外菜单 CSS 过渡问题

Question

我正在尝试创建一个在右侧和左侧均可使用的 Canvas 外菜单系统。

我可以让菜单正确显示，并且左侧菜单完全符合我的要求；但是右侧菜单无法正确关闭；它在进行 CSS 转换之前跳转。演示可用: http://scottpringle.co.uk/projects/offcanvas/demo/

JSFiddle 可用: http://jsfiddle.net/D7ZZA/

代码如下:

CSS:

   @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900,400italic,600italic,700italic,900italic);

/* TODO: Use Flexbox */

/*Set Box Sizing Properties + base font and size */
html {
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
}

html, body {
    height: 100%;
    margin: 0;
}

p { margin: 0; line-height: 100%; }

ul, li {
    margin: 0;
    list-style: none;
    padding: 0;
}

.fullWidth { width: 100%; }

*, *:before, *:after {
    box-sizing: inherit;
}

img { max-width: 100%; }

/* Set all headers to Lato */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
}

.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
.mt-5 { margin-top: 5px; }

.ml-20 { margin-left: 20px; }
.ml-10 { margin-left: 10px; }
.ml-5 { margin-left: 5px; }


.mr-20 { margin-right: 20px; }
.mr-10 { margin-right: 10px; }
.mr-5 { margin-right: 5px; }

.mb-20 { margin-bottom: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-5 { margin-bottom: 5px; }

.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-5 { padding-top: 5px; }

.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-5 { padding-left: 5px; }

.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pr-5 { padding-right: 5px; }

.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-5 { padding-bottom: 5px;}

.clearfix { clear: both; }

.mainContainer {
    width: 90%;
    margin: 0 auto;
    max-width: 1600px;
}

.logo h1 { margin: 0; }

.contentArea {
    min-height: calc(100% - 6em - 20px);
}

label {
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 0 2px;
    display: block;
}

input[type="submit"], input[type="button"] {
    border: 1px solid green;
    border-radius: 5px;
    background: green;
    color: white;
    box-shadow: 2px 2px 2px green;
}

header {
    width:100%;
    background: green;
    height: 4em;
    line-height: 4em;
    color: white;
}

footer {
    background: lightgreen;
    width: 100%;
    color: white;
}

footer {
    height: 2em;
    line-height: 2em;
}

header .mainContainer, footer .mainContainer { text-align: center; }

.left { float: left; }
.right { float: right; }

.leftContent, .rightContent {
    width: 200px;
}

.alignLeft { text-align: left !important; }
.alignRight { text-align: right !important; }
.alignCentre { text-align: center !important; }


.sectionTitle {
    height: 2em;
    font-size: 2em;
    /*margin: 0.67em 0;*/
    background-color: green;
    opacity: 0.7;
    line-height: 2em;
    text-align: center;
    color: white;
}

.centreContent {
    margin: 0 50px;
    width: calc(100% - 500px);
}

.sectionArea {
    border: 1px solid green;
}

.sectionArea .sectionContent {
    padding: 10px 10px 5px;
}

.noPadding { padding: 0 !important; }

.relative { position: relative; }

nav.leftSide > ul > li > ul > li.childNav > ul > li {
    font-size: 0.8rem;
    padding-left: 15px;
}

.off-canvas {
    width: 10rem;
    height: 100%;
    background-color: #eeeeee;
    position: fixed;
    top: 0;
    -webkit-transition: left 2s, right 2s; /* For Safari 3.1 to 6.0 */
    transition: left 2s, right 2s;
}

.off-canvas.nav-right {
    right: -10rem;
}

.off-canvas.nav-left {
    left: -10rem;
}

.off-canvas.nav-left.open {
    left: 0;
}

.off-canvas.nav-right.open {
    right: 0;
}

.page-wrap {
    -webkit-transition: all 2s;
    transition: all 2s;
    position: relative;
    left: 0;
    right: 0;
}

.page-wrap.wrap-left {
    left: 10rem;
    right: auto;
}

.page-wrap.wrap-right {
    right: 10rem;
    left: auto;
}

nav.off-canvas > ul li {
    border-bottom: 1px solid green;
}

nav.off-canvas > ul li:last-child {
    border-bottom: none;
}

nav.off-canvas > ul li.navTitle {
    padding-left: 10px;
    font-size: 1.5rem;
}
nav.off-canvas > ul li.navChild {
    background: #aaaaaa;
    padding-left: 20px;
    font-size: 1.2rem;
}

nav.off-canvas > ul > li.navMenu > ul > li.slide {
    display: none;
}

.headerMenu.fa {
    line-height: 2.75;
    font-size: 1.5rem;
    cursor: pointer;
}

HTML:

<html>
<head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
    <!--TODO: Re-add font-awesome-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <!--TODO: Convert to absolute URL format-->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <title>ScorePredcitor</title>
</head>
<body>

<nav class="nav-left off-canvas">
    <p>Left Menu</p>
</nav>

<nav class="nav-right off-canvas">
    <p>Right Menu</p>
</nav>

<div class="page-wrap">

    <header class="clearfix">
        <section class="visible-mobile visible-tablet left headerMenu fa fa-bars" data-menu="nav-left">
        </section>
        <section class="mainContainer left">
            <!--Site Header-->
            <article class="logo">
                <h1>Off Canvas</h1>
            </article>
        </section>
        <section class="visible-mobile right headerMenu fa fa-bars" data-menu="nav-right">
        </section>
    </header>
    <div class="mainContainer contentArea">
        <article class="centreContent left">
            <p>Click bars at the top to view menus</p>
        </article>
        <div class="clearfix"></div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="../assets/javascript/main.js"></script>
</body>
</html>

Javascript:

$(document).ready(function(){
    $(document).on('click tap', '.headerMenu', function(e){
        e.preventDefault();
        e.stopImmediatePropagation();

        //Get menu
        var toOpen = $(this).data('menu');
        var menu = $('.'+toOpen);
        var openClose = (menu.hasClass('open')) ? true : false;
        menu.toggleClass('open');

        var navSides = toOpen.split('-');
        var side = navSides[1];
        $(".page-wrap").removeClass('wrap-left wrap-right');
        if(openClose == false) {
            $(".page-wrap").addClass('wrap-'+side);
        }
    });

    $(document).on('click tap', 'nav.off-canvas > ul > li.navMenu > ul > li.navTitle', function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        if ($(this).siblings('li.slide')) {
            $(this).siblings('li.slide').slideToggle('fast');
        }

        ($(this).children('i').hasClass('fa-arrow-circle-down')) ? $(this).children('i').removeClass('fa-arrow-circle-down').addClass('fa-arrow-circle-up') : $(this).children('i').removeClass('fa-arrow-circle-up').addClass('fa-arrow-circle-down');
    })
});

Answer 1

据我所知，CSS 似乎不喜欢将 left:auto 转换为 left: 0。我相信默认情况下 left 的原因是 0。当 10rem 的右侧测量值被 0rem 替换时，它看起来像左边并没有真正在听，并且认为 auto 开始时是 0，这就是它跳跃的原因。我建议立即左右移动。因为你用的是静态测量，精度是有保证的。请参阅下面的修改类。

您正在转换所有内容，所以这应该会顺利进行，正如您在此处看到的那样 http://jsfiddle.net/D7ZZA/1/

.page-wrap.wrap-right {
  right: 10rem;
  left: -10rem;
}