javascript - 如何组合两个 CSS 动画

Question

我正在尝试复制以下人使用的菜单设计:

https://www.pandaexpress.com/menu/appetizers

我想我正处于需要使用 javascript/jquery 的地步，但我是新手，不确定我的下一步。当用户将鼠标悬停在图像上时，图像似乎会滑入焦点并在下方显示信息。我试图将其隔离为单独的操作，由以下 jfiddles 建模:

https://jsfiddle.net/Lrqu8L0q/3/ (在悬停时放大并聚焦图像) https://jsfiddle.net/4ud7wnop/1/ (向下滑动以在悬停时显示文本)

我尝试组合它们，但是当我添加

<p>This text is displayed on a downward slide after hover</p>

对于第一个 jfiddle，该段落没有被隐藏。

现在我很难想出一种方法将两者结合起来。我想我需要使用 javascript/jquery 创建一个函数，在图像放大完成后应用向下滑动以显示文本。我对整个网页设计还很陌生，对 javascript 和 jquery 尤其不熟悉。

我想知道我是否可以编写一个函数来检查图像是否已在放大时展开，并在达到所需的高度/宽度后运行文本滑动函数。真的不知道该怎么做。有人能给我指出正确的方向吗？

Answer 1

我在这里将它们合并在一起:https://jsfiddle.net/danbovey/53ya31gm/

主要问题是，您需要更大的图像以覆盖您可能拥有的任何详细文本。

我已经评论了我在 fiddle 中添加的大部分更改。但这里是关键部分:

我把bg元素重命名为tile，看起来更合适。我没有为 .slide-down 类使用 height，而是在悬停磁贴时在细节 div 上创建了一个转换。

.tile:hover .details {
    transform: translateY(150%);
}

您可以在此处了解 CSS 转换:http://css3.bradshawenterprises.com/transforms/

变换的百分比可以计算为 img 的高度/细节的高度 - 300px/200px = 150%

为了创建不断增长的效果，一个伪 :before 元素在平铺之前添加了一个与图像大小相同的白色区域，并且当鼠标悬停时，在每个边缘周围增长到 25 像素。并将相同的元素添加到详细信息 div。

.tile:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  transition: all 0.4s ease;
  content: '';
}

.tile:hover:before {
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
}