将右侧的 <div> 窗口左边

Question

我正在尝试在HTML / CSS中实现一个Android样式的侧边栏，该边栏可显示和隐藏自身。 现在，我一直在摆弄CSS的right和left属性，试图弄清楚（标题中的措辞不太好）如何将div（侧边栏）恰好位于左侧，以便完全隐藏。

一个例子：

+---+--------------+
|   |              |
| D |       B      |
|   |              |
+---+--------------+

（其中D是所讨论的<div> ， B是屏幕上实际显示的区域）

这可能吗？ 我已经尝试了right: 100% ，基本上可以完成我想要的操作，但是它不能与transition因为它无法从right: 100%; left: auto过渡right: 100%; left: auto right: 100%; left: auto ； right: auto; left: 0 right: auto; left: 0 （或至少以我的经验）...

非常感谢您的帮助！

编辑：我意识到我可以有一个恒定宽度的侧边栏，因此能够轻松地转换它，但是我想拥有一个宽度未预先确定的侧边栏（证据似乎指向JavaScript作为唯一的选择，以便访问元素的宽度）

Answer 1

您是否考虑过可以将负值添加到边距中的事实？
例如，如果您的div宽度为50px ：

margin-left: -50px;

然后，您可以使用过渡功能将50px添加到事件的左边距。

Answer 2

如果div是以视口单位为单位的设置宽度，则可以将其负宽度隐藏后，从50vw中减去其宽度的一半，以将其放置在中心。

body{
  margin:0px;
  padding:0px;
}

div{
  background:gray;
  height:75vh;
  width:25vw;
  margin-left:37.5vw; /*50-(25/2) ensures it is centered*/
  animation:slide 2s;
}

@keyframes slide{
  from {margin-left:-25vw;}
  to {margin-left:37.5vw;}
}

Answer 3

我发现我必须使用JavaScript来解决这个问题，因为与CSS似乎不可能。 因此，元素的原始位置将是：

right: 100%;

我可以使用：

el.style.right = "calc(100% - " + el.offsetWidth);

...活动时。 或-webkit-transform 。