CSS边框不会动画

Question

出于某种原因,当我将鼠标悬停在div上时,边框会正常动画,但是将其移除会产生转换.我错过了什么？

http://codepen.io/anon/pen/XbPbvr

HTML:

<div class="test">
  Test
</div>

减:

.test {
  background: #eee;
  border-bottom: none;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

Answer 1

如果您确实不想要边框,可以将颜色设置为透明,长度设置为0:

.test {
  background: #eee;
  border-bottom: 0px solid transparent;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;
}

.test:hover {
  border-bottom: 5px solid black;
}

<div class="test">
  Test
</div>