CSS過渡使邊框消失（邊框出現在：活動）

Question

我不確定我能否很好地解釋我的問題，因爲我仍然是一個新手，所以我做了一個JSFiddle我的代碼。

問題是當我的div處於活動狀態（或點擊狀態）時，會出現一個邊框，並帶有一個很好的轉換。

但是當div不再活躍時，邊界在消失時沒有轉換：它只是在一眨眼之間消失。

所以我希望能夠有一個過渡時，邊界出現，當它消失。

你能幫我嗎？提前致謝 ！

<div class="square"></div> 

*{ 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
} 

.square { 
height: 250px; 
width: 250px; 
background: #1abc9c; 
border: none; 
transition: .2s; 
} 

.square:active { 
border: solid 50px #000; 
} 

https://jsfiddle.net/8vmkychx/embedded/result/

Answer 1

正試圖從無到有不工作的過渡。

嘗試用零限寬邊框上，然後過渡

* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.square { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: #1abc9c; 
 
    border: 0px solid seagreen; 
 
    transition: .5s; 
 
} 
 
.square:active { 
 
    border: 50px solid seagreen;

<div class="square"></div>

Answer 2

它發生，因爲你已經設置的邊界沒有。一個50px透明邊框添加到.square

.square { 
    border: solid 1px transparent; 
    transition: .2s; 
} 

小提琴：https://jsfiddle.net/8vmkychx/3/

Answer 3

您需要更改爲：

*{ 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width:100px; 
    height:100px; 
    border:1px solid red; 
} 

.square { 
    height: 250px; 
    width: 250px; 
    background: #1abc9c; 
    border: solid 0px #000; 
    transition: .2s; 
} 

.square:active { 
    border: solid 50px #000; 
} 

http://jsfiddle.net/kqnotw5k/

Answer 4

Paulie_D的答案偉大的工作，一世「以前也有試過填充它和它的作品以及

<div class="squarecontainer"><div class="square"></div> 

* { 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
} 

.squarecontainer { 
height: 250px; 
width: 250px; 
transition: .2s; 
padding: 0; 
background: #000; 
} 

.squarecontainer:active { 
padding: 50px; 
} 

.square { 
width: 100%; 
height: 100%; 
background: #1abc9c; 
} 

https://jsfiddle.net/8vmkychx/4/