更改相对位置时悬停过渡不起作用？

【问题标题】：Hover transitions not working when changing relative positioning?更改相对位置时悬停过渡不起作用？
【发布时间】：2017-12-28 02:47:19
【问题描述】：

尝试在悬停在绝对定位的 div 上时添加过渡时间，该 div 会在顶部增加 20px。悬停效果有效，但过渡时间未生效。

SCSS：

div {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 300px;
  background-color: grey;
  transition: all 5s;
  &:hover {
    top: 20px;
  }
}

代码笔：https://codepen.io/KevinM818/pen/YYZqKY

【问题讨论】：

标签： html css sass

【解决方案1】：

设置top属性的初始值为0px。

div {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 300px;
  background-color: grey;
  transition: all .5s;
  top: 0px;
  &:hover {
    top: 20px;
  }
}

代码笔：https://codepen.io/anon/pen/opZxzo

【讨论】：