添加带过渡效果的框阴影

本文介绍了添加带过渡效果的框阴影的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我向一个div添加一个类，为该div添加一个框阴影。这通过jquery动态地发生。现在，当添加类时，阴影效果也会自动添加，而没有任何效果。在这种情况下是否有通过css添加一些过渡效果的方法？

HTML：

< div id =box>< / div>

CSS：

code> #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; }

解决方案

code> transition （或供应商前缀版本）到CSS：

$（'＃t'）。click（function（）{$（'＃box'）。toggleClass（'shadow'）;}）; / pre>

#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 = ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><button id =t>切换'shadow'类< ; / button>< div id =box>boxdiv中的某些内容。< / div>

JS Fiddle演示。

参考文献：

• click（） 。
• toggleClass（） 。

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?

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; }

解决方案

Yes, simply add the transition (or the vendor-prefixed versions) to the 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="ajax.googleapis/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 demo.

References:

• click().
• toggleClass().