html - css 动画：将隐藏的 div 从侧面滑动到中心

Question

我想为某种浮动div设置动画。当 div 处于 'close' 状态时，大部分都隐藏在屏幕的右侧，只有20px仍然可见。

当我点击可见部分时，div移动到屏幕的中心，显露出来。（这就是我所说的状态打开）

我的问题是：

• 我只知道如何让div居中，margin:auto当我为它设置动画时它会做一些奇怪的事情
• 当 div 被“关闭”时，“隐藏”部分会创建一个添加滚动的溢出。我不想要那个
• div的宽度变化很大，视情况而定。因此，我不能在CSS中使用大量硬编码值。

知道怎么做吗？即使是部分解决方案也会对我有所帮助。

编辑：解决方案（感谢@sonic）

.open{
  translateX(-50%);
  left:50%;
}

.close {
  translateX(-20px);
  left:100%;
}

标签： htmlcss

Answer 1

它的问题太开放了，无法提供 2,3 分的帮助，甚至很难说目标是什么并且没有代码，谁知道...

像这样居中div：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

您可以轻松地为这些属性设置动画。