一、问题

写了一个瀑布流，要求实现当鼠标划过卡片时，整体向上移动。但是出现了以下问题：划过边缘时，会出现剧烈抖动。

二、解决

整体思路是，应当划过外层div，动画效果给内层div，就可以解决了。

具体可以看代码：

之前的代码

.apt-item-wrap {
    width: 424px;
    height: 269px;
    cursor: pointer;
    transition: all 0.2s linear;

    &:hover {
      transform: translateY(-8px);

      .apt-logo,
      .apt-item {
        border-color: #1059D5;
      }
    }
  }

修改后的代码

.apt-item-wrap {
    width: 424px;
    height: 269px;
    cursor: pointer;
    
    .apt-logo,
    .apt-item {
      // 给到内层
      transition: all 0.2s linear;
    }
    
    &:hover {
      .apt-logo,
      .apt-item {
        // 给到内层
        transform: translateY(-8px);
        border-color: #1059D5;
      }
    }
  }

修改后的效果