添加带过渡效果的框阴影 [英] Add box shadow with transition effect

问题描述

我向一个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 = https://ajax.googleapis.com/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="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 demo.

References:


click().
toggleClass().


                        
这篇关于添加带过渡效果的框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！