Web Kit Transitions Left功能不起作用 - 解决小提琴

Question

我在这个位置遇到了很大的麻烦：webkit过渡中的相对元素将其移动到左侧。它应该工作，但不是。通过jQuery添加一个类，该类应该生效。

<div id="reviews">
    <div id="dropout">Blast</div>

    <a href="#" onclick="dropout(); return false">move it</a>
</div>

#reviews #dropout {
    position:relative;
    min-height:40px;
    left:40px;
    -webkit-transition: left 600ms;
    -moz-transition: left 600ms;
}
#reviews .dropopen {
    min-height:40px;
    left:0px;
    -webkit-transition: left 600ms;
    -moz-transition: left 600ms;
}

function dropout() {
    $('#dropout').addClass('dropopen');
}

也许小提琴可能会帮助http://jsfiddle.net/4WmJz/1/

有什么想法吗？

非凡

Answer 1

Solved！ （我希望）

有几个问题。首先，onclick()函数没有正确绑定，jQuery没有加载到jsFiddle页面上，最重要的是，选择器的特殊性是错误的。基本上#id #id选择器具有比#id .class更高的特异性，因此即使将类正确添加到元素中，也不会应用属性。

修改链接到great visualization of CSS specificity的另一个场合。