2

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

我的 HTML：

<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 应该做的那样。问题是当它们触发时，它们会立即出现而不是滑入。

4

1 回答 1

0

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

于 2013-09-07T00:57:21.507 回答