使用过渡效果添加盒阴影

Question

使用过渡效果添加盒阴影

29

我正在将一个类添加到一个 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;
}

- King Julien

什么样的效果？比如淡入吗？ - j08691

你可以为 #box 添加过渡效果。只需搜索语法即可。 - mreq

是的，类似这样：http://jsfiddle.net/VWvua/ - King Julien

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

是的，只需将 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演示。

参考资料：

click()函数。
toggleClass()函数。