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

【问题标题】：CSS transition position absolute from one edge to the otherCSS过渡位置绝对从一个边缘到另一个
【发布时间】：2017-06-19 17:05:12
【问题描述】：

如何将具有绝对位置 (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>

【问题讨论】：

标签： css html css-transitions css-position

【解决方案1】：

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

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>

【讨论】：

使用calc是否有任何性能问题或其他缺点？
我对 calc 没有什么特别的看法。我相信理想情况下，如果你想要丝般平滑的过渡，你应该只过渡不透明度和变换。这里的问题是变换与你所在的元素有关。如果您在屏幕上执行此操作，上面 Aykut 的方法可以正常工作，但如果您无法使用 vw 或 vh，那么仅通过转换几乎不可能完成，因此您将不得不求助于top 和 right

【解决方案2】：

将您的 .clicked 类更改为

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

【讨论】：