Почему мой переход React Button не работает?

Question

Я использую стилизованные компоненты в приложении React для анимации кнопки перемещения вверх на 5 пикселей при наведении курсора. Он движется вверх, но переход не гладкий. Кто-нибудь знает как это исправить?

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. Добавьте следующее к нормальному состоянию, и в вашем коде отсутствует свойство 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>