响应式断点触发的 CSS 过渡答案

【问题标题】：CSS transition triggered by responsive breakpoint响应式断点触发的 CSS 过渡
【发布时间】：2014-07-24 05:33:30
【问题描述】：

背景：

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

问题：

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

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

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

/* 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; }
}

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

【问题讨论】：

你不能只删除适当媒体查询中的过渡吗？
不，因为适当的媒体查询是默认的（移动优先），并且那里需要过渡。请记住，一旦您到达 1200 以上的断点，您就处于移动领域。
您是否尝试过将过渡 CSS 绑定到单击它时添加的类？默认情况下，没有过渡，因此在调整浏览器大小时它会正常运行，但是当用户单击按钮时，添加类（因此添加过渡 css）。
tomaroo，我想我知道你的意思，这将是一个合乎逻辑的出路，但我如何将转换与类而不是正在改变的属性联系起来？实际上有两种过渡，一种用于滑入，一种用于滑出。转换规则之一始终处于活动状态 - 除非我使用 JavaScript 计时器来删除类和/或转换完成后。

标签： css twitter-bootstrap responsive-design css-transitions

【解决方案1】：

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

为什么不直接将其拆分为单独的 css 文件，然后在检测到移动（或桌面）时部署适当的 css 文件？

如果你在你的元素上使用过渡，如果触发了媒体查询，它就会过渡，在使用基本 css 时你无能为力，你需要实现一个 javascript / jQuery hack。

【讨论】：

仅供参考，我没有否决你。我也开始意识到这一点。我认为解决方案是在输入/输出状态下使用单独的类进行转换（即不是任何一种情况的默认值），在单击菜单按钮时添加类，并在完成后使用 jQuery 计时器将其删除。丑陋。

【解决方案2】：

您可以尝试使用：

left: -100%;

代替：

  transform: translateX(-100%);

然后

transition: all .4s;

请随意更改您的情况，但它对我的 NO BOOTSTRAP 项目有所帮助。

【讨论】：

这解决了我的问题，但我不明白为什么会这样。我使用的是 translateX 而不是 left。