我正在向一个div添加一个类,该类会向该div添加框阴影。这是通过jquery动态发生的。现在,当添加类时,阴影效果也会自动添加,没有任何效果。在这种情况下,有没有办法通过css添加一些过渡效果?
HTML:
<div id="box"></div>
CSS:
#box {
width: 50px;
height: 200px;
}
.shadow {
-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
box-shadow: 0px 0px 4px 2px #D50E0E;
}
是的,只需将transition
(或供应商前缀的版本)添加到CSS:
$('#t').click(
function(){
$('#box').toggleClass('shadow');
});
#box {
width: 50px;
height: 200px;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
.shadow {
-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
box-shadow: 0px 0px 4px 2px #D50E0E;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="t">Toggle the 'shadow' class</button>
<div id="box">Some content in the 'box' div.</div>
JS Fiddle演示。
参考文献:
- CCD_ 2
toggleClass()