Javascript 如何复制Netflix颌骨动画？

在Netflix中，当您将鼠标悬停在特定行中的电影缩略图上时，缩略图的大小会有一点变化，您可以选择下拉并打开一个单独的组件，该组件已标记为

.jawbone

打开此

.jawbone

时，使用CSS中的

translate3d

向下移动

.jawbone

下的所有电影行

我想知道如何复制他们正在做的事情

---

我可以看到下面的所有行（打开

.jawbone

后）都应用了

max width

和

min width

的媒体查询，然后激活

transform:translate3d（）

，但它们如何仅将此媒体查询应用于下面的行，而不是上面的

.jawbone

打开的电影行。

所有行都有一个公共类，例如：rowContainer

当一个特定的缩略图悬停并打开预览时，将一个唯一的类（例如：rowContainerPreviewOpen）应用于该缩略图所属的行

在此之后，在.css文件中使用以下选择器

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

.rowContainer.rowContainerPreviewOpen~.rowContainer{
变换：translate3d（0，px，0）；
}

---

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

所有行都有一个公共类，例如：rowContainer

当一个特定的缩略图悬停并打开预览时，将一个唯一的类（例如：rowContainerPreviewOpen）应用于该缩略图所属的行

在此之后，在.css文件中使用以下选择器

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

.rowContainer.rowContainerPreviewOpen~.rowContainer{
变换：translate3d（0，px，0）；
}

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

尝试在devtools中设置断点，然后单击该行元素的CSS样式的任何更改都将导致调试器停止。我个人不使用Netflix，所以我自己无法测试。请尝试在devtools中设置断点，然后单击该行元素的CSS样式的任何更改都将导致调试器停止。我个人不使用Netflix，因此无法亲自测试。