将元素从当前位置过渡到视口中心？

Posted 2023-03-06

【中文标题】将元素从当前位置过渡到视口中心？

【英文标题】：Transitioning an element from its current position to the center of the viewport?

【发布时间】：2015-07-03 16:04:59

【问题描述】：

将元素从当前位置转移到视口中心？

这基本上就是我要问的。

我希望 elem 从页面上的任何位置平滑地移动到图像的中心，使用复选框之类的东西在状态之间切换。

我真的很想用纯 CSS 来做这件事。能做到吗？

【问题讨论】：

请提供可修改的示例 html 和 CSS 代码以实现此目标。像这样的问题需要更多上下文才能提供答案。

codepen.io/mildrenben/pen/MwYgVY 当你点击小猪时，它会摇晃到给定的位置，我该如何平滑过渡？

【参考方案1】：

http://codepen.io/anon/pen/LVEYZm

试试这样的。问题是您没有在默认状态下指定transform 或top 和left，因此CSS 转换不知道如何在切换检查时从未定义状态计算到已定义状态。

img 
    width: 400px;
    position: absolute;
    transition: all 0.3s ease;
    /* these need to be specified as well */
    top: 0;
    left: 100px;
    transform: translate(0, 0);


input:checked 
    + label 
        img 
            /* since they're the values being transitioned */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        
    

【讨论】：

感谢您的评论，但我已经知道了（并不是说听起来像个混蛋）。我想要那个结果，但不必指定顶部和左侧。

@mildrenben - 为什么要求不指定顶部和左侧？如果您已经知道它应该在您的问题中。

@mildrenben 你的请求是不可能的，使用纯 CSS。也许你应该问一个关于这个的新问题，请求一个 javascript 解决方案，限制是 top 和 left 在初始 CSS 状态中没有定义。同时，我对您最初问题的回答实际上是正确的，应该被接受。