所以我可以通过它的中心枢轴很好地缩放div：
http://jsfiddle.net/uTDay/
但是,当我在div中添加内容时,转换开始改变：http://jsfiddle.net/uTDay/1/
请注意,它不再从中心缩小.
我也尝试使它渐渐消失,因为它开始缩小.fadeOut()/ .fadeTo()/ .animate()但无法使它工作.
基本上,当你点击过滤器选项 – 它从中心枢轴收缩/增长的方式同时淡入/淡出时,我想要达到的效果就是这里的效果：http://isotope.metafizzy.co/demos/filtering.html
谢谢.
解决方法
CSS3方法
同位素使用CSS变换来缩放元素,这就是所有内容随之缩放的原因.如果只是更改框(容器)大小,则包含的节点不受影响(文本具有相同的字体大小等)
使用CSS转换或更改内容的大小以及容器元素(如其他答案所示).
小提琴
相关代码
使用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); }
