为什么我的React Button过渡不起作用？

Question

我在React App中使用样式化的组件为按钮设置动画，使其在悬停时向上移动5px。它确实向上移动，但过渡不平稳。有人知道如何解决此问题吗？

CSS：

const UpButton = styled.button`
  font-family: "Avenir";
  height: 3em;
  width: 3em;;
  color: white;
  border: 2px solid white;
  background: #1d1d20;
  font-size: 1em;
  position: relative;
  float: right;

  &:hover{
    top: -5px;
    cursor: pointer;
  }
`

Answer 1

这是使用transition的常见问题。将以下内容添加到正常状态：

top: 0;

因此，CSS将知道在0px和-5px之间进行动画处理。

您的完整代码应为：

const UpButton = styled.button`
  font-family: "Avenir";
  height: 3em;
  width: 3em;;
  color: white;
  border: 2px solid white;
  background: #1d1d20;
  font-size: 1em;
  position: relative;
  float: right;
  top: 0;
  &:hover{
    top: -5px;
    cursor: pointer;
  }
`;