应用过渡和变换的不同方式？

Question

我在第一个 child 和我的方框 div 集合的其他 children 上分别应用悬停时的变换。但是，当我将鼠标悬停在第一个 child 之外时，这会导致一个问题，因为第一个 child 和其他 children 上的转换属性仍然相同，但是变换是不同的。因此，我正在寻找其他方法在第一个 child.

上应用过渡

每个网格上的第一项悬停问题 - https://netflix-clone-by-shivam.herokuapp.com/

我尝试在转换属性上使用 not(:first-child) 来解决问题，但现在它没有转换。我还尝试添加过渡属性和 javascript 但它带回了过渡问题。

//react - mapping over collectionItems is returning divs with class box

 <div className="preview">  

  {     
        movies
        ? (movieData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  {
        tvshow
        ? (tvData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }

</div>

//css

.preview {
display: flex;

cursor: pointer;

&:hover {
  .box {
    transform: translateX(-25%); //moves items on the left by 25%
  }
}

.box:hover ~ .box {
  transform: translateX(25%); //moves items on the right by 25%
}

.box:first-child:hover ~ .box {
 transform: translateX(50%); //moves items to the right of firstchild by 50%
}

.box {
  &:not(:first-child) {
  transition: transform 300ms ease 100ms;
}

  &:hover {
    transform: scale(1.5);
  }
  &:hover:first-child {
    transform-origin: left;
    transform: scale(1.5);
  }
}

}

Answer 1

您无需单独处理。您只需将 transform-origin: left; 设置为仅 :first-child（无悬停）。通过将它放在 :hover 中，它仅适用于悬停与悬停和悬停。尝试用以下代码替换代码末尾的当前 .box 块：

.box {
    transition: transform 300ms ease 100ms;
    &:first-child { /* should only be &:fist-child */
      transform-origin: left;
    }
    &:hover {
      transform: scale(1.5);
    }
}

应用过渡和变换的不同方式？

Different way of applying a transition and transform?

css

css-transitions