添加具有过渡效果的框阴影

Question

我正在为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;
}

Answer 1

是的，只需将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 demo

参考文献：

• click()。
• toggleClass()。