javascript - 如何将CSS规则插入javascript？

Question

animation: scaleUp 0.3s linear 0.4s forwards;

animation: scaleDown 0.3s linear forwards;

您好，我正在尝试在过滤内容时对内容进行动画处理。当“隐藏所有不共享我们类的元素”和“显示所有共享我们类的元素”时，我试图将上面的这两个 css 规则添加到下面的 javascript 代码中，但我真的不知道如何打开和关闭标签，因为我对 Javascript 了解不多。如果你能帮助我，我将不胜感激。谢谢。

$(document).ready(function() {
$('#filterOptions li a').click(function() {
    // fetch the class of the clicked item
    var ourClass = $(this).attr('class');

    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
        // show all our items
        $('#ourHolder').children('div.item').show();    
    }
    else {
        // hide all elements that don't share ourClass
        $('#ourHolder').children('div:not(.' + ourClass + ')').hide();

        // show all elements that do share ourClass
        $('#ourHolder').children('div.' + ourClass).show();
    }
    return false;
});

});

Answer 1

除非我遗漏了什么，否则我看不出以下原因不起作用:

$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");

或

$("#ourHolder").css({"animation" : "scaleUp 0.3s linear 0.4s forwards"});

然而，将 css 添加到类并切换类绝对是更好的做法。

请注意，我不确定您需要什么选择器，我只是选择了 #ourHolder 作为示例。