为什么我的 React Button 转换不起作用？答案

【问题标题】：Why is my React Button transition not working?为什么我的 React Button 转换不起作用？
【发布时间】：2020-08-11 01:30:54
【问题描述】：

我在 React 应用程序中使用样式化组件为按钮设置动画以在悬停时向上移动 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;
  }
`

【问题讨论】：

标签： css reactjs animation button styled-components

【解决方案1】：

这是使用transition 的常见问题。将以下内容添加到正常状态，并且您的代码也缺少 transition 属性：

transition: all 0.5s linear;
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;
  transition: all 0.5s linear;
  top: 0;
  &:hover{
    top: -5px;
    cursor: pointer;
  }
`;

你可以在这里看到工作和区别：

button {
  height: 3em;
  width: 3em;
  color: white;
  border: 2px solid white;
  background: #1d1d20;
  font-size: 1em;
  position: relative;
  float: left;
  transition: all 0.5s linear;
}
button.top {
  top: 0;
}
button.top:hover,
button:hover {
  top: -5px;
  cursor: pointer;
}

<button>No top</button>
<br /><br /><br />
<button class="top">With top</button>

【讨论】：