如何为 CSS 框阴影深度设置动画（使用 jQuery 或 CSS3 过渡）？答案

【问题标题】：How do I animate CSS box-shadow depth (with jQuery or CSS3 transitions)?如何为 CSS 框阴影深度设置动画（使用 jQuery 或 CSS3 过渡）？
【发布时间】：2013-09-25 04:00:07
【问题描述】：

这确实会造成延迟，但似乎直到最后才应用样式更改：

for (i=20;i>=0;i--) {            
    var boxShadow = i+"px "+i+"px "+i+"px #888";
    $('article').css("box-shadow", boxShadow);
    sleep(20);
}
function sleep(ms)
{
    var dt = new Date();
    dt.setTime(dt.getTime() + ms);
    while (new Date().getTime() < dt.getTime());
}

这根本不适用延迟：

for (i=20;i>=0;i--) {            
    var boxShadow = i+"px "+i+"px "+i+"px #888";
    $('article').delay(500).css("box-shadow", boxShadow);
}

这可以通过 css3 过渡更轻松地完成吗？我只是在延迟示例中犯了一些小的 jquery 错误吗？

感谢任何可以提供帮助的人。

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案1】：

您可以使用类和setTimeout 来利用 CSS3 过渡来制作动画效果：

CSS --

#some-element {
    -webkit-transition : all 0.5s linear;
       -moz-transition : all 0.5s linear;
        -ms-transition : all 0.5s linear;
         -o-transition : all 0.5s linear;
            transition : all 0.5s linear;
}
#some-element.ani-state {
    -webkit-box-shadow : 0 0 24px #000;
       -moz-box-shadow : 0 0 24px #000;
            box-shadow : 0 0 24px #000;
}

由于 Chrome，我使用 all 进行转换声明...某些版本的 Chrome 使用 -webkit-box-shadow，而较新的版本使用 box-shadow。如果您不更改元素的任何其他属性（或者如果您想为这些属性更改设置动画），all 并不是什么大问题。

JS--

$(function () {

    var $someElement = $('#some-element');

    $someElement.on('click', function () {
        $someElement.addClass('ani-state');
        setTimeout(function () {
            $someElement.removeClass('ani-state');
        }, 500);
    });
});

这是一个演示：http://jsfiddle.net/jasper/tvfPq/1/

请注意，在演示中我使用了两个box-shadows：box-shadow : 0 0 24px #000, inset 0 0 24px #999;

【讨论】：

延迟已经是 css 转换的一部分：transition: property duration timing-function delay; 所以如果你希望你的转换有 500 毫秒的延迟，你只需包括它。 transition: all 0.5s linear 500ms;
@scurker 注意setTimeout 内部是.removeClass()，所以我将元素恢复到原始状态。动画立即开始。 setTimeout 的超时设置为 CSS 转换的持续时间，因此它完全完成，然后恢复到原始状态。
我误读了原始问题。如果您想在动画运行后将动画恢复到原始状态，那么最好的方法似乎是使用 @keyframes。
@scurker 老实说，这只是一个演示，OP 应该能够提取出他/她需要的内容，以便根据需要通过 JS 运行 CSS 动画。我喜欢关键帧的想法，但我不喜欢重新编码所有不同的供应商前缀......
@danieltalsky 您只需绑定到 transitionend 事件而不是使用 setTimeout。请参阅此更新代码：jsfiddle.net/hVyUq/.

【解决方案2】：

最近发布了一个 jquery 插件来执行此操作。顶一下：Shadowmation

【讨论】：