javascript - 为什么这个 css transition 不能制作从一个点到另一个点的平滑动画？

Question

我在尝试将元素(图像)过渡到页面中心时遇到问题。

问题是它跳到一个点，然后为其余的过渡设置动画，而不是为向中心的一个移动设置动画。

img {
  position: relative;
  width: 350px;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease;
}

.transformed {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

在这里您可以看到它的实际效果:https://codesandbox.io/s/xz8o225yz

Answer 1

您也必须在第一个类中输入参数。喜欢:

    img {
      position: relative;
      width: 350px;
      left: 0; 
      top: 0;
      transition-property: all;
      transition-duration: .5s;
      transition-timing-function: ease;
    }

    .transformed {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

只有当你添加 ex: left:0 和 top:0 时，动画才知道从哪里开始。对于您想要动画的所有参数都是一样的。