javascript - CSS Transition 不起作用(高度和边距)

Question

我真的不知道为什么这不起作用:fiddle
当我点击红色框时，我希望它向下移动 50px 并将高度更改为 200px。

有什么想法吗？

Answer 1

不幸的是，这就是 CSS 的工作方式，ID 作为选择器的优先级高于读取此 article 的类了解更多信息。

点击后，我添加了一个具有您想要的大小/marign 更改的类。

.box {
    background-color: red;
    height: 100px;
    margin-top: 0px;
    width: 100px;
    display: block;
    transition: all .5s ease-in-out;
}

.box-active {
    height: 200px;
    margin-top: 50px;
}

JS

$('.box').click(function(){
    $(this).addClass("box-active");
});

这是工作解决方案的 fiddle 。 Fiddle