CSS 使边框消失的过渡（边框出现在 :active 上）

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

发生这种情况是因为您将边框设置为 none。在 .square

中添加 50px 透明边框

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

Fiddle: https://jsfiddle.net/8vmkychx/3/

Answer 2

您正试图从无到有地过渡到无效的状态。

尝试用零宽度定义边框然后过渡

* {
  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 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/

CSS 使边框消失的过渡（边框出现在 :active 上）

CSS transition to make a border go away (the border appears on :active)

html

css

border