CSS过渡使边框消失（边框出现在：活动）

我不确定我能否很好地解释我的问题，因为我仍然是一个新手，所以我做了一个JSFiddle我的代码。CSS过渡使边框消失（边框出现在：活动）

问题是当我的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/

来源

2015-07-20 Léo Kaj Cbnns

正试图从无到有不工作的过渡。

尝试用零限宽边框上，然后过渡

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

来源

2015-07-20 17:36:31

哦，这看起来不错！我会试试这种方式，非常感谢你。顺便说一句，你认为我可以做同样的填充？ –

应该努力......试一试。 –

它发生，因为你已经设置的边界没有。一个50px透明边框添加到.square

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

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

来源

2015-07-20 17:34:40 gopalraju

不完全：■我喜欢的边界如何动画。事实上，我希望边界做相同的动画，但在另一个方向 –

在这种情况下，将边框设置为1px。答案已更新！ – gopalraju

您需要更改为：

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

来源

2015-07-20 17:46:13

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/

来源

2015-07-20 17:50:00

CSS过渡使边框消失（边框出现在：活动）

回答

相关问题