Html 添加具有过渡效果的框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9540540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add box shadow with transition effect
提问by King Julien
I'm adding a class to a div that adds a box shadow to that div. This happens dynamically via jquery. Now, when the class is added, the shadow effect is added automatically as well, without any effect. Is there a way to add some transition effect via css in this case?
我正在向 div 添加一个类，为该 div 添加一个框阴影。这是通过 jquery 动态发生的。现在，当添加类时，阴影效果也会自动添加，没有任何效果。在这种情况下，有没有办法通过 css 添加一些过渡效果？
HTML:
HTML：
<div id="box"></div>
CSS:
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;
}
回答by David says reinstate Monica
Yes, simply add the transition(or the vendor-prefixed versions) to the CSS:
是的，只需将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>References:
参考：
