我正在尝试实现一个特殊的过渡：基本上有三个部分：左侧的固定宽度垂直导航栏，旁边的可折叠部分以及页面的其余部分。单击导航栏中的图标时，左侧面板会切换打开/关闭状态。过渡应使导航栏下方的左侧面板“滑动”。
因此，我们只需为left属性设置动画，对吗？嗯..没有。位置已更改，但仍具有相同的宽度，因此它以相同的方式影响右侧。
我还尝试了其他一些方法，例如对右侧进行动画处理，但最终它们需要使用calc()IE中不支持的动画。
长话短说，我得到了一个原型。问题是它取决于vw单位。从caniuse.com和我在支持的浏览器（基本上是IE10 +，Chrome和Safari的最新版本）中进行的测试来看，它似乎可以正常工作，并且显然处于候选推荐状态，但是我有点犹豫要依靠对生产现场来说是如此新。
所以基本上，我有几个问题：
有没有更简单的方法可以做到这一点（我觉得应该有）？IE10 +支持哪一种？
视口单位是否足够稳定以至于可以投入生产（假设我们不需要该vmax单位或垂直单位，也不需要在calc()语句中使用它们）？
如果您使用复选框hack，则不需要任何JavaScript，视口单元，甚至根本不需要calc！它要求您稍微更改标记和CSS来弥补
<!-- Changed HTML -->
<!-- The only thing you need to change is to surround the `ul` in a label and
add a corresponding input for it -->
<input type="checkbox" id="toggle-1" />
<label for="toggle-1">
<ul class="chart-tabs">
<li>Chart</li>
<li>Tabs</li>
</ul>
</label>
/* Changed CSS */
.chart-tabs {
padding: 0;
margin: 0;
list-style-type: none;
}
.left-content {
width: 33%;
background: blue;
color: white;
position: relative;
height: 100%;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
z-index: 1;
.section {
width: 100%;
height: 100%;
position: absolute;
right: 0;
background-color: orange;
}
}
/* CSS to add */
label[for='toggle-1'] {
display: inline-block;
background: red;
width: 54px;
height: 100%;
z-index: 2;
}
#toggle-1 {
position: absolute;
top: -9999px;
left: -9999px;
}
#toggle-1:checked ~ .left-content { margin-left:-33%; }
我的方法允许%使用，而不是vw，但是您可以使用视口单位，具体取决于要到达的后退距离。当前所有主流浏览器均支持
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句