javascript - 改变元素高度的CSS动画

Question

我可能在这里遗漏了一些明显的东西。我有一个在元素悬停时触发的基本动画。它工作得很好。但我也希望它添加一些特定的 Action 。我尝试只添加 addClass("") 样式，但它不起作用。这可能吗？

我知道我可以调用 $(element).hide(); - 但如果可能的话，我想通过将特定类添加到元素来运行动画。

这是我的代码:

http://jsfiddle.net/PR9xF/1/

html

<ul>
    <li></li>
    <li id="hideme"></li>
    <li></li>
</ul>
<button id="bt">Click</button>

js

$("#bt").click(function () {
    $("#hideme").removeClass("hide");
    $("#hideme").addClass("hide");
});

CSS

ul {
    list-style-type:none;
}

li {
    margin-bottom:5px;
    background-color:silver;
    height:120px;
    max-height:120px;
}

#hideme {
    max-height: 500px;
    transition: max-height 1s ease-in;
}

#hideme:hover {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

.hide {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

Answer 1

声明你的风格是这样的:

#hideme:hover, 
#hideme.hide {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

演示:http://jsfiddle.net/PR9xF/9/

一切都与规则优先级有关。当您仅定义 .hide 时，它的权重低于 #hideme，因此永远不会应用您的过渡。