如何复制Netflix颚骨动画？

Question

在Netflix中，当您将鼠标悬停在特定行的电影缩略图上时，缩略图的大小会有所缩放，并且您可以选择下拉并打开一个单独的组件，它们被标记为.jawbone。

打开此.jawbone后，.jawbone下面的所有电影行都使用CSS中的translate3d向下移动。

我正在尝试找出如何复制他们正在执行的操作。

我可以看到下面的所有行（一旦.jawbone打开后，都对其应用了max-width和min-width的媒体查询，然后激活了{{1 }}，但是他们如何仅将此媒体查询应用于打开了transform: translate3d()的电影行的下面行而不是之上行？ >

Answer 1

所有行都有一个通用类，例如：适用于它们的rowContainer。

当特定的缩略图悬停并打开其预览时，请为该缩略图所属的行应用唯一类，例如：rowContainerPreviewOpen。​​

然后，在.css文件中使用以下选择器。

.rowContainer.rowContainerPreviewOpen ~ .rowContainer {
   transform: translate3d(0, <desired pixel value>px, 0);
 }

〜表示将转换应用于当前预览行之后的所有行。