由响应断点触发的CSS转换

Question

背景：

我有一个Bootstrap导航栏应该从右侧向外滑动而不是从顶部向下滑动。我不想为此使用复杂的非画布或其他插件。当它不可见时，将包含div的左坐标向右推（100％）似乎可以正常工作。我没有在实际页面上获得水平滚动条，也没有调查是否是因为Codepen或缺少CSS规则，所以请忽略它。

问题：

CSS转换由媒体查询/响应断点点击（通过类更改）或（不需要）触发（通过将浏览器宽度从+1200向下调整直到达到断点）。然后CSS转换开始，因为桌面的DIV左坐标为0，平板电脑分辨率需要更改为100％，从而使菜单不可见。这不应该是动画。

我需要以某种方式阻止断点触发转换。我知道有JavaScript选项，但我希望在我的CSS中找到一个我没有看到的逻辑修复。

http://codepen.io/anon/pen/sKLvn

＆＃13;

＆＃13;

/* nav bar */
.navbar-tablet {
    display: none; }
.navbar-inverse .navbar-brand {
    clear: both; 
    text-transform: uppercase;
    padding: 5px;
    height: 30px;
    font-size: 1.2em;
    font-family: 'Lato', sans-serif;
    font-weight: bold; }

.navbar-stuff, 
.navbar-links {
    float: left; }

.navbar-stuff {    
    clear: both; 
    font-family: 'Lato', sans-serif;
    font-weight: bold; 
    margin-top: 20px; }
    .navbar-stuff .navbar-callbutton {
        font-family: 'Lato', sans-serif;
        font-weight: bold;
        margin-right: 20px;
        text-transform: uppercase; }
    .navbar-stuff .navbar-address {
        font-family: 'Lato', sans-serif;
        font-weight: normal;
        color: #838181;  
        margin-top: 20px;
        padding-bottom: 20px; }
    .form-icon .fa-circle,
    .email-icon .fa-circle {
        color: #0f9cd8; }
    .facebook-icon .fa-circle {
        color: #537bbd;  }
    .linkedin-icon .fa-circle {
        color: #2085c7;  }
    .twitter-icon .fa-circle {
        color: #78cdf0;  }



.navbar > div {
    width: 100%;
    position: relative;
    background-color: #2b2b2b;
    border-color: #2b2b2b; }
#navbar-collapse {
    display: block;
    background-color: #2b2b2b;
    border-color: #2b2b2b;
	position: absolute;
	left: 100%;
    height: 500px;
    width: 100%;
	-moz-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
	-webkit-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
	-ms-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s; 
	transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s; }
    #navbar-collapse.showing {
	    left: 100px;
	    width: 100%;
	    -moz-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
	    -webkit-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
	    -ms-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
	    transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s; }


@media (min-width: 768px) {

    .navbar-tablet {
        display: inline-block;
        clear: none; 
        text-transform: uppercase;
        vertical-align: top;
        margin-top: 15px;
        padding-left: 25px;
        height: 30px;
        font-size: 1.1em;
        font-family: 'Lato', sans-serif;
        font-weight: bold; }
        .navbar-tablet,
        .navbar-tablet:focus {
            color: white; }
        .navbar-tablet .dimwit,
        .navbar-tablet:focus .dimwit {
            color: #999; }
        .navbar-tablet:hover {
            text-decoration: none;
            color: #98e0ff; } 

    .navbar-tablet.collapsed {
        display: none; }
}


@media (min-width: 1200px) {
    body {
        padding-top: 0px; }

    .jumbotron {
        max-height: 125px;
        min-height: 125px;
        border-bottom: 1px solid #c2c2c2; }

    .navbar {
        border: none;
        padding: 20px; }

    #navbar-collapse {
        position: relative;
        margin-left: 100px;
        left: 0px; 
        background-color: transparent;
        border-color: transparent; 
        -moz-transition: none;
        -webkit-transition: none;
        -ms-transition: none;
        transition: none; }
  
  
  
      .navbar > div {
        width: 100%;
        position: relative;
        background-color: transparent;
        border-color: transparent; }

    .navbar-tablet {
        display: none; }

    .navbar-links {
        text-align: justify;
        margin-left: 0px;
        width: 80%; }

    .navbar-stuff {
        display: none; }

    .navbar-inverse {
        background-color: transparent;
        border-color: transparent; }

        .navbar-inverse.scrolling {
            border-color: #2b2b2b;
            background: rgb(75,75,75); 
            background: rgba(75,75,75, 0.9); }

        .navbar-inverse .navbar-brand {
            margin-left: 10px;
            text-align: right;
            padding-top: 32px;
            font-size: 18px;
            line-height: 20px;
            height: 70px;
            clear: none;
            font-size: 1.1em; }

        .navbar-inverse .navbar-brand {
            margin-left: 5%; }
            .navbar-inverse .navbar-brand,
            .navbar-inverse .navbar-brand:focus {
                color: #2b2b2b; }
                .navbar-inverse .navbar-brand .dimwit,
                .navbar-inverse .navbar-brand:focus .dimwit {
                    color: #2b2b2b;}
            .navbar-inverse .navbar-brand.current,
            .navbar-inverse .navbar-brand.current:focus {
                color: #009ddc; }
                .navbar-inverse .navbar-brand.current .dimwit,
                .navbar-inverse .navbar-brand:focus.current .dimwit {
                    color: #009ddc;}
        .navbar-inverse.scrolling .navbar-brand,
        .navbar-inverse.scrolling .navbar-brand:focus {
            color: white; }
        .navbar-inverse.scrolling  .navbar-brand .dimwit,
        .navbar-inverse.scrolling  .navbar-brand:focus .dimwit {
            color: white; }
    .navbar-inverse .navbar-brand:hover {
        color: #98e0ff !important; } 

    .hasJumboTron .navbar-inverse .navbar-brand,
    .hasJumboTron .navbar-inverse .navbar-brand:focus {
        color: white; }
        .hasJumboTron .navbar-inverse .navbar-brand .dimwit,
        .hasJumboTron .navbar-inverse .navbar-brand:focus .dimwit {
            color: white; }
            .hasJumboTron .navbar-inverse .navbar-brand.current,
            .hasJumboTron .navbar-inverse .navbar-brand.current:focus {
                color: #000; }
                .hasJumboTron .navbar-inverse .navbar-brand.current .dimwit,
                .hasJumboTron .navbar-inverse .navbar-brand:focus.current .dimwit {
                    color: #000;}
            .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current,
            .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current:focus {
                color: #009ddc; }
                .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current .dimwit,
                .hasJumboTron .navbar-inverse.scrolling .navbar-brand:focus.current .dimwit {
                    color: #009ddc;}
    
    #logoplaceholder {
        background-image: url('../images/logo_blue_md.png');
        width: 77px;
        height: 69px; }

    .hasJumboTron #logoplaceholder {
        background-image: url('../images/logo_white.png');
        width: 74px;
        height: 68px; }
}

＆＃13;

<script src="http://development.podconsulting.net:8088/js/pod.js"></script>
<script src="http://development.podconsulting.net:8088/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div>
                <div class="navbar-header">
                    <a href="/"><div id="logoplaceholder"></div></a>
                    <button type="button" class="navbar-toggle">
                        <div class="icon-bar"><i class="fa fa-bars fa-2x"></i></div>
                    </button>
                </div>
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <div class="navbar-links">
                        <!-- Menu -->
                        <a class="navbar-brand" href="#">Services <span class="dimwit">+</span> Philosophy</a>
                        <a class="navbar-brand" href="#">Case Studies</a>
                        <a class="navbar-brand" href="#">People <span class="dimwit">+</span> Culture</a>
                        <a class="navbar-brand" href="#">Jobs&nbsp;<div class="jobnumber"><p>2</p></div></a>
                        <!-- End Menu -->
                    </div>
                </div><!--/.navbar-collapse -->
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我还不能发表评论，所以我不得不在这里发表评论/答案。

为什么不离开它并将其拆分为单独的css文件，然后当您检测到移动（或桌面）部署相应的css文件时？

如果你在元素上使用过渡，它会在触发媒体查询时转换，在使用基本css的情况下你无法做到这一点，你需要实现一个javascript / jQuery hack。

Answer 2

您可以尝试使用：

left: -100%;

代替：

  transform: translateX(-100%);

然后

transition: all .4s;

请随时根据您的情况进行更改，但这为我开展了无引导项目提供了帮助。