我想使用.attr动画一个CSS更改来更改链接

Question

我有这段脚本来改变CC，但是这个改变是瞬间的，我想给它做一个动画（使其顺利），任何想法如何实现？

脚本：

$(document).ready( function(){
    var css = 'x';
    $('#button').button();
    $('#button').click( function() {
        if (css == 'x') {
            $('#button').button('option', 'label', 'change to css x');
            $('link[href="css/x.css"]').attr('href', 'css/y.css');
            css= 'y';
        }
        else if (css== 'y') {
            $('#button').button('option', 'label', 'change to css y');
            $('link[href="css/y.css"]').attr('href', 'css/x.css');
            css= 'x';           
        }
    });
});

Answer 1

这可能被认为是不好的做法，但您可以尝试暂时添加：

* {
    transition: all ease-in-out 1s;
}

然后，执行CSS更改，然后删除此规则。

我没有测试它，它可能根本不起作用。只是一个想法。