使用精灵效果最小化<div>的Javascript？</div>

Question

我想最小化一个盒子，就像Mac上的精灵效果中的popup popin一样，我发现jQuery Transfer effect很接近，但还不够，它只绘制了一个轮廓并且没有实际上是不是要涂抹物体，有没有办法模仿精灵最小化Mac的效果？

感谢。

Answer 1

纯DOM操作无法实现此效果。元素的流和形状由浏览器的渲染引擎确定。您可以应用CSS3转换，但即使这只限于实现此外观所需的组合步骤的子集。但是，如果您可以将Flash作为此解决方案的一部分，那么您还有更多选择：

http://wonderfl.net/c/qnTR

这个例子让我好斗（最好的Hello World！）：

http://swingpantsflash.com/genie_transition/genietransition.html

Answer 2

如果使用画布库，则可以实现精灵效果。 这是一个名为CAAT的人。

尝试使用animate.css

中的fadeInUpBig和fadeOutDownBig类

Answer 3

没有任何类似于精灵效果的东西。您可以获得的最接近的动画是使用CSS变换（使用缩放和偏斜）和jQuery回调自己创建的东西。设置顶部，左侧，宽度和高度值的标准CSS属性不会为您带来效果。