响应式断点触发的 CSS 过渡
Posted
技术标签:
【中文标题】响应式断点触发的 CSS 过渡【英文标题】：CSS transition triggered by responsive breakpoint 【发布时间】：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 <div class="jobnumber"><p>2</p></div></a>
<!-- End Menu -->
</div>
</div><!--/.navbar-collapse -->
</div>
</div>
</div>【问题讨论】：
你不能只删除适当媒体查询中的过渡吗？ 不，因为适当的媒体查询是默认的（移动优先），并且那里需要过渡。请记住，一旦您到达 1200 以上的断点，您就处于移动领域。 您是否尝试过将过渡 CSS 绑定到单击它时添加的类？默认情况下，没有过渡，因此在调整浏览器大小时它会正常运行，但是当用户单击按钮时，添加类（因此添加过渡 css）。 tomaroo，我想我知道你的意思，这将是一个合乎逻辑的出路，但我如何将转换与类而不是正在改变的属性联系起来？实际上有两种过渡，一种用于滑入，一种用于滑出。转换规则之一始终处于活动状态 - 除非我使用 JavaScript 计时器来删除类和/或转换完成后。 【参考方案1】：我还不能发表评论，所以我将不得不在这里留下我的评论/答案。
为什么不直接将其拆分为单独的 css 文件，然后在检测到移动（或桌面）时部署适当的 css 文件？
如果你在你的元素上使用过渡，如果触发了媒体查询，它就会过渡，在使用基本 css 时你无能为力，你需要实现一个 javascript / jQuery hack。
【讨论】：
仅供参考，我没有否决你。我也开始意识到这一点。我认为解决方案是在输入/输出状态下使用单独的类进行转换（即不是任何一种情况的默认值），在单击菜单按钮时添加类，并在完成后使用 jQuery 计时器将其删除。丑陋。【参考方案2】：您可以尝试使用：
left: -100%;
代替：
transform: translateX(-100%);
然后
transition: all .4s;
请随意更改您的情况，但它对我的 NO BOOTSTRAP 项目有所帮助。
【讨论】：
这解决了我的问题，但我不明白为什么会这样。我使用的是 translateX 而不是 left。以上是关于响应式断点触发的 CSS 过渡的主要内容，如果未能解决你的问题，请参考以下文章
Pushy是一个响应式的画布外导航菜单，使用CSS转换&；过渡。