Question

我有一个特殊的过渡我试图实现：基本上有三个部分：左边是固定宽度的垂直导航栏，旁边是可折叠部分，页面的其余部分。单击导航栏中的图标时，左侧面板将切换打开/关闭。转换应使左侧面板＆＃34;滑动＆＃34;在导航栏下。

所以我们只是为left属性制作动画，对吗？嗯.. no。位置已更改，但仍具有相同的宽度，因此它以相同的方式影响右侧。

我还尝试过其他一些东西，比如动画右边的动画，但他们最终要求在动画中使用calc()，IE不支持。

长话短说，我得到prototype工作。问题在于它取决于vw单位。从caniuse.com和我在支持的浏览器（基本上是IE10 +，最近版本的Chrome和Safari）中进行的测试，看起来工作正常，而且它显然处于候选人推荐状态，但是我很少有他的帮助依靠生产现场的新东西。

基本上，我有几个问题：

有没有更简单的方法（我觉得应该有）？ IE10 +支持哪一个？
视口单元是否足够稳定以便投入生产（假设我们不需要vmax单位或垂直单位，或者在{{1}中使用它们语句）？

Answer 1

如果您使用the checkbox 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%; }

Demo

我的方法允许使用%代替vw，但您可以使用视口单元，具体取决于您想要到达的距离。 All current major browsers support it

使用CSS进行幻灯片切换

1 个答案: