CSS邊框不會生成動畫

Question

由於某些原因，當我將鼠標懸停在div上時，邊框會正確動畫，但是鼠標懸停不會產生轉換。我錯過了什麼？

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

HTML：

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

LESS：

.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>

Answer 2

你不能動畫邊境底部：沒有，更改到下邊框：RGBA（0， 0,0,0）（或者可能是border-bottom：如果可以的話，透明）。

在懸停範圍內，您也不需要「過渡：邊框100毫秒鬆開」。

Answer 3

邊界不能none。試試這個：

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

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