Question

通过使用下面的代码，我只是尝试用动画效果来切换文本阴影，我已经为正向流程完成了它，但是反向流程并不顺利。它恢复没有任何动画效果。任何人都可以帮我解决这个问题吗？

HTML：

<h1>testing testing testing</h1>

<button>glow</button>
<button>unglow</button>

JS：

$(':button:contains(glow)').click(function () {
    $('h1').addClass('shadow');
});

$(':button:contains(unglow)').click(function () {
    $('h1').addClass('removeShadow');
});

CSS：

h1.removeShadow {
    -webkit-animation: removeGlow 1s 1;
    -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes removeGlow {
    to {
        text-shadow: 1px 0px 0px rgba(0, 0, 0, 0);
    }
}
h1.shadow {
    -webkit-animation: glow .7s 1;
    -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes glow {
    to {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
    }
}

DEMO

Answer 1

Here is the DEMO

@-webkit-keyframes removeGlow {
    from {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
    }

    to {
        text-shadow:none;
    }
}

Answer 2

也许只是我的观点，但这似乎太过于挣扎。

新演示：http://jsfiddle.net/Z6k8V/5/

h1
{
    transition-duration: 1s;
    transition-property: text-shadow;
}
h1.shadow
{
    text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
}

Answer 3

更简单，这可以通过转换和toggleClass

来完成

JSfiddle Demo

<强> CSS

h1 {
    transition:text-shadow 1s ease;
}
.shadow {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 
        1px 1px 10px rgb(255, 153, 0), 
        1px 1px 10px rgb(255, 153, 0);
}

<强> JQuery的

$(':button:contains(glow)').click(function () {
    $('h1').toggleClass('shadow');
});

使用css3动画切换类不能按预期工作

DEMO

3 个答案: