使用CSS进行幻灯片转换

Question

我正在尝试实现一个特定的转换：基本上有三个部分：左侧的固定宽度垂直导航栏、旁边的可折叠部分以及页面的其余部分。当您单击导航栏中的图标时，左侧面板会切换打开/关闭。转换应使左侧面板在导航栏下"滑动"。

所以我们只是将left属性设置为动画，对吧？好没有。位置改变了，但宽度仍然相同，所以它以同样的方式影响右侧。

我还尝试了一些其他的东西，比如改为右侧动画，但它们最终需要在动画中使用calc()，IE不支持。

长话短说，我得到了一个原型工作。问题在于它取决于vw单元。从caniuse.com和我在我们支持的浏览器（基本上是IE10+、Chrome和Safari的最新版本）中的测试来看，它似乎工作得很好，而且显然处于候选人表彰状态，但我有点习惯于依赖生产网站的新功能。

所以基本上，我有几个问题：

• 有没有更简单的方法（我觉得应该有）？一个在IE10+上支持的？

• 视口单元是否足够稳定，可以投入生产（假设我们不需要vmax单元或垂直单元，或者在calc()语句中使用它们）？

Answer 1

如果使用复选框破解，则根本不需要任何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，但您可以根据要到达的距离使用视口单位。目前所有主流浏览器都支持它