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

这是因为您将边框设置为无。向50px

添加.square透明边框

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

小提琴：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转换使边框消失（边框显示在：活动状态）

4 个答案: