html - 绝对定位的过渡

Question

请考虑以下示例。 球形的 Div 确实会移动，但它会突然移动，我希望它沿对 Angular 线过渡到页面的右下角。为什么没有发生这种情况？我错过了什么？

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
}
.one:hover {
  background: red;
  bottom: 0px;
  right: 0px;
}

<div class="one"></div>

Answer 1

要实现过渡，您需要在父元素选择器和悬停元素选择器上都设置值。

这里我只是为两个选择器添加了适当的值，并通过轻松地减去它们的高度。

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}

<div class="one"></div>

这些将适用于大多数现代浏览器。您也可以使用 pollyfill 使其与落后的浏览器一起工作

要实现转换，您需要在两个选择器上都设置值。

在您的例子中，父选择器没有任何 bottom 或 left 的值，但是如果您查看我的代码，父选择器和悬停选择器都没有有顶部和左侧的值(value)。

我们只需要指定值，以便浏览器知道从哪里开始