jQuery add/removeClass 不会触发'right'属性的 CSS 转换

我正在尝试使用预构建的类，我可以与jQuery交换，从而使用CSS中定义的jQuery触发动画。但是由于某种原因，每当我使用 addClass 或 removeClass 导致"right"从 -5% 变为 0% 时，都没有过渡。元素的样式会立即更改，没有动画。

我的网页：

<body>
    <ol style="list-style-type:none">
        <li style="top: 20%;" id="about" class="pane closed hidden" onclick="function(event){}">about</li>
        <li style="top: 25%;" id="education" class="pane closed hidden">education</li>
        <li style="top: 30%;" id="experience" class="pane closed hidden">experience</li>
        <li style="top: 35%;" id="contact" class="pane closed hidden">contact</li>
    </ol>
</body>

我的 CSS：

.pane {
    transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;
    -webkit-transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;
    width: 5%;
    height: 3%;
    text-align: left;
    padding-left:20px;
    padding-top:0.5%;
    position: fixed;
    background-color: lightgray;
    overflow:hidden;
    right: 0%;
}
.pane.hidden {
    right: -5%;
}
.pane.closed {
    opacity: 0.6;
}
.pane:hover {
    width: 8%;
    opacity: 0.8;
}

我的Javascript：

$(document).ready(function() {
    setTimeout(function(){$('#about').removeClass('hidden');}, 200);
    setTimeout(function(){$('#education').removeClass('hidden');}, 400);
    setTimeout(function(){$('#experience').removeClass('hidden');}, 600);
    setTimeout(function(){$('#contact').removeClass('hidden');}, 800);
});

为了清楚起见，类更改确实以间隔 200 毫秒的顺序发生，就像 setTimeout 应该做的那样。问题是，当它们触发时，它们会立即出现，而不是滑入。

解决了。我也包括了Twitter Bootstrap CSS。显然那里的某些东西是冲突的，这就是为什么它在 jsFiddle 中工作的原因。如果我不得不猜测，它可能使用一个名为"隐藏"的类来更改转换值或其他东西（我应该想到的东西）。感谢您的时间和精力，那些回复的人。

相关内容

最新更新

热门标签：