Question

我需要一些CSS编码方面的帮助。我目前正在尝试制作的是侧边栏（如在移动页面上），但不是使位置绝对，而是让两个div在包装器中浮动。

我的解释技巧不是那么好，所以我将继续给你一个非常简单的例子进行演示。

HTML：

/* Just some general settings */
* { margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
}

/* When toggle - do this */
#toggle:checked + .wrapper > .content {
  margin-left: -25%;
  transition: all ease 1s;
}

/* The wrapper */
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all ease 1s;
}

/* The content */
.wrapper > .content {
  width: 100%;
  height: 100%;
 overflow: auto;
  float: left;
  background-color: #2ecc71;
  transition: all ease 1s;
}

/* The sidebar */
.wrapper > .sidebar {
  width: 25%;
  height: 100%;
  overflow: auto;
  float: left;
  background-color: #27ae60;
  transition: all ease 1s;
}

CSS：

self.dayLabel.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi/2))

正如您所看到的，当您单击“显示”或“隐藏”时，侧边栏不会显示或平滑消失。 有什么方法可以让它顺利吗？

Answer 1

最简单的方法是在body标签上切换一个类。例如.sidebar-open：

.wrapper,
.sidebar {
  transform: translateX(0);
  transition: all .5s ease-in-out;
}    

.sidebar-open .wrapper,
.sidebar-open .sidebar {
  transform: translateX(-200px);
}

当使用过渡移动时，如何使两个浮动div平滑地相互跟随？

1 个答案: