使用 jQuery/CSS 缩小/增长动画答案

【问题标题】：Shrink/Grow animation using jQuery/CSS使用 jQuery/CSS 缩小/增长动画
【发布时间】：2012-10-30 17:52:27
【问题描述】：

如何使用 jQuery 和/或 CSS 实现增长/收缩动画？当您单击Join Now 按钮时，我能想到的一个示例是this。

我查看了animate.css，但他们没有提供这样的动画。

【问题讨论】：

有大量的 jquery modal 插件可用。一点谷歌搜索可能会出现“30 种最佳模式”或类似内容。也称为dialog的
我自己创建了模态，现在我想用“收缩”动画为模态设置动画。
易于使用 jQuery 实现 animate() 方法 api.jquery.com/animate 使用您想要的任何 css 属性。还有一些内置效果，如slideUp()、slideDown()。也请查看插件的来源。效果 API：api.jquery.com/category/effects
我在页面的任何地方都看不到现在加入文本
@defau1t geeesh..try ctrl+F

【解决方案1】：

DEMO — 使用 CSS3 的 transition-duration (W3Schools) 和 transform:scale(X,Y); (W3Schools) 的解决方案。

更新：

DEMO — 更进一步，不仅仅是在动画末尾添加 display:none;（通过 jQuery .hide()）更改为 opacity:0;。

【讨论】：