时间戳

首页 > 解决方案 > 应用过渡和变换的不同方式？

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

问题描述

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

每个网格上第一个项目的悬停问题 - 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);
  }
}

}

标签： csscss-transitions

解决方案

You don't need to handle it separately. You simply need to set your transform-origin: left; on :first-child only (no hover). By placing it in :hover it is only is applied on hover vs on hover and hover out. Try replacing your current .box block at the end of your code with this:

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

推荐阅读