从一个边缘到另一个边缘的 CSS 过渡位置绝对

Question

如何将具有绝对位置 (right: 0; bottom: 0px) 的 HTML div 过渡到另一个边缘 (left: 0px; top: 0px;) .

我尝试了以下代码，但是，使用绝对元素的过渡似乎只在使用左/上或右/下时才有效。

在 HTML5 中执行此操作的首选方法是什么？

var ele = document.getElementById("my-box");
ele.addEventListener("click", function() {
	ele.classList.toggle("clicked");
});

.box {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 0.7s ease;
}
.box.clicked {
  top: auto;
  bottom: 0px;
  left: 0px;
  right: auto;
}

<div class="box" id='my-box'>

</div>

Answer 1

您应该继续使用top 和right 来点击下方。只需使用计算器来定位它们，如下所示

var ele = document.getElementById("my-box");
ele.addEventListener("click", function() {
	ele.classList.toggle("clicked");
});

.box {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 0.7s ease;
}
.box.clicked {
  top: calc(100% - 100px);
  right: calc(100% - 100px);
}

<div class="box" id='my-box'>

</div>