wunderlist.com 上的动画弹出窗口答案

【问题标题】：Animated pop-up like on wunderlist.comwunderlist.com 上的动画弹出窗口
【发布时间】：2013-03-28 14:27:51
【问题描述】：

我遇到了wunderlist.com 网站，我爱上了他们在“了解更多关于奇妙清单”标题下方的图片上的类似缩放的弹出窗口。我很想在我的网站上实现这样的功能。

谁能告诉我这是怎么做到的？我试图进行逆向工程，但没有运气:) 我不希望得到完整的代码，但也许有一些关于如何使用 CSS/jQuery 实现这一点的指南。

或者你知道一些我可以使用的 jQuery 插件？

【问题讨论】：

【解决方案1】：

他们使用所有的 CSS。真的很简单.. 我会为你编写一个完整的 js fiddle 示例，但我没有时间，所以我将列出你需要的不同元素以及它们如何交互。

这应该让你开始。

如有问题请留言。

【讨论】：

【解决方案2】：

尝试着眼于两个主要方面：打开您选择的检查器工具，看看body.login .feature 会发生什么 ...更具体地说，看看它的 transform: scale 和 opacity 值在 :hover 时会发生什么变化。

提示：过渡主要在他们身上。

仍然在您的检查器中，将比例更改为 (1)，将不透明度更改为 1。它如何顺利地从一种状态变为另一种状态由 transition 属性决定。

这并不是要告诉您确切的实现方法，而是要让您上路:)

【讨论】：

谢谢，它确实让我上路了！还有一件事——页面的其余部分是如何变灰的？
当您查看#welcome-screen 节点时，您会发现一个ID 为#overlay 的div。最初，它的不透明度为 0。在使用 :hover 激活其他任何一个时，它的不透明度过渡到 1。

【解决方案3】：

其实没那么难。 Wunderlist 团队甚至让它变得更容易。他们有一个大的精灵图像，缩放后的图像被裁剪并准备好圆角、边框和阴影。你可以在这里看到它：https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png

您所做的是在鼠标悬停时显示一个半透明的黑色背景（可以是位置：固定为全宽和全高）。然后创建一个以精灵作为背景图像的元素（更好的是，在你的 css 中准备好一个类并将其附加到新创建的元素中）。将位置设置为悬停元素的位置。

当添加到 dom 时，为元素的变换比例设置动画（从它们开始的 scale(.24) 之类的东西开始）。

【讨论】：

【解决方案4】：

好吧，既然您尝试了逆向工程。我会试着引导你走这条路。

只有一个 id 为 overlay 的 div 会改变它的位置和内容，悬停在任何具有类 feature 的 div 上。远离他们的app js，它没有被缩小。

在这种情况下弹出的内容是一个image移动到不同的位置。

【讨论】：