jQuery Scale和Fade同时进行

Question

所以我可以通过它的中心枢轴很好地扩展div:http://jsfiddle.net/uTDay/

但是,当我在div中添加内容时,转换开始改变:http://jsfiddle.net/uTDay/1/

请注意,它不再从中心缩小.

我也尝试使它消失,因为它开始缩小.fadeOut()/ .fadeTo()/ .animate()但无法使它工作.

基本上,当你点击过滤器选项时,我想要实现的是这种效果 - 它shrink/grow从中心枢轴的方式,同时,fade in/out:http://isotope.metafizzy.co/demos/filtering.html

谢谢.

Answer 1

CSS3方法

同位素使用CSS变换来缩放元素,这就是所有内容随之缩放的原因.如果只是更改框(容器)大小,则包含的节点不受影响(文本具有相同的字体大小等)

使用CSS转换或更改内容的大小以及容器元素(与其他答案建议一样).

小提琴

http://jsfiddle.net/UFQW9/

相关代码

使用Javascript

$(".btn a").click(function () {
    $('.box').addClass('hidden');
});

CSS

.box {
    display: block;
    height: auto;
    width:402px;
    /*height:200px;*/
    background-color: red;
    padding: 20px;

     -webkit-transition: all 1000ms linear;
    -moz-transition: all 1000ms linear;
    -ms-transition: all 1000ms linear;
    -o-transition: all 1000ms linear;
    transition: all 1000ms linear;
}
.box.hidden {
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform: scale(0.01);
    -webkit-transform: scale(0.01);
    -o-transform: scale(0.01);
    -ms-transform: scale(0.01);
    transform: scale(0.01);
}

?