从cookie加载CSS类(带过渡)，而不过渡到它们

Question

这是我在stackoverflow上的第一篇文章!

我已经创建了css在两个不同的背景颜色之间过渡。

.body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #999;
        transition: background 5s;
        webkit-transition: background 5s;
}
.bodyclick {
    background-color:#333
}

这是一个照片库类型的页面，我喜欢有不同的背景选项来查看图像。我还使用javascript/jQuery在两种颜色之间转换，当一个类为"project name"的对象被点击，并存储当前背景状态在一个cookie，以便背景颜色将保持不变，当你浏览不同的页面。

// toggles 'bodyclick' class on the body based on the click of an object with the class projectname and sets the state in a cookie
$(document).ready(function() {
    var button = $('.projectname');
    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') {
        toggleBackground(button, false);
    }
    else {
        toggleBackground(button, true);
    }
    //handle the clicking of the background (projectname)  toggle button
    button.click(function() {
        //toggle the background as required, base on current state
        if ($('.body').hasClass('bodyclick')) {
            toggleBackground($(this), true);
        }
        else {
            toggleBackground($(this), false);
        }
    });
});
function toggleBackground(button, show) {
    var background = $('.body');
    if (show) {
        background.removeClass('bodyclick');
        $.cookie('currentToggle', '', { path: '/' });
    }
    else {
        background.addClass('bodyclick');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
};

我现在唯一的问题是，当cookie被设置为深灰色，你刷新或导航到一个单独的页面，它从默认的颜色(白色)过渡到深灰色，当页面加载，而不是只是保持不变。如果我从CSS中删除过渡属性，它会立即加载到我想要的颜色，但我喜欢点击改变背景时的过渡效果。

如果你想看现场直播，可以访问这个页面

，点击右下角的文字"post consumer"来改变颜色，然后刷新或导航到另一个页面。

让我知道我如何才能使这个过渡只有当点击，而不是在页面加载，或者如果我需要更好地澄清我的问题。

也是一个附带问题。谁能解释一下"隐藏"one_answers"显示"值在我的javascript做什么?我是新的编程，我从一个stackoverflow的帖子和修改它做我需要的代码，但我不完全理解这些值是如何工作的。

Answer 1

添加和删除第二个类，它覆盖第一个类的过渡:

.no-transition {
    transition: all 0s !important;
    -webkit-transition: all 0s !important;
}

JS:

background.addClass('no-transition').addClass('bodyclick').removeClass('no-transition');