将元素从其当前位置过渡到视区的中心

Question

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

这基本上就是我要问的全部内容。

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

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

Answer 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%);
        }
    }
}