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

Question

如何将具有绝对位置（right: 0; bottom: 0px）的HTML div转换为另一个边缘（left: 0px; top: 0px;）。

我尝试过以下代码，但是，使用left / top或right / bottom时，只使用绝对元素的转换似乎有效。

在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

将您的.clicked类更改为

.box.clicked {
  transform:translate(calc(-100vw + 100px) ,calc(100vh - 100px))
}

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;