javascript - Javascript 最小化使用精灵效应？

Question

我想最小化一个框，就像 Mac 上精灵效果中的弹出弹出框一样，我发现 jQuery Transfer效果很接近，但还不够，它只画了一个轮廓，实际上并没有涂抹对象，有没有办法模仿 Mac 的精灵最小化效果？

谢谢。

Answer 1

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

http://wonderfl.net/c/qnTR

这个例子让我大吃一惊（有史以来最好的 Hello World！）：

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

Answer 2

如果您使用画布库，您可以实现精灵效果。这是一个叫做CAAT的。

尝试使用animate.cssfadeInUpBig中的和fadeOutDownBig类

Answer 3

没有任何东西类似于精灵效应。如果您使用 CSS 变换（使用缩放和倾斜）和 jQuery 回调自己制作一些动画，您可以获得的最接近的动画。设置顶部、左侧、宽度和高度值的标准 CSS 属性不会让您获得想要的效果。