Question

我正在尝试预先构建的类，我可以使用jQuery交换进出，从而使用CSS中定义的jQuery触发动画。但由于某种原因，每当我使用addClass或removeClass使得'right'从-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);
});

为清楚起见，类更改确实按顺序间隔200ms发生，因为setTimeout应该这样做。问题在于，当它们触发时，它们会立即显示而不是滑入。

Answer 1

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

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

1 个答案: