scss实现网格布局中的移入动画

实现效果

原先效果

移入效果

代码如下

<div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<style lang="scss" scoped>
.content{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  // 列布局
    grid-template-rows: 1fr 1fr 1fr; // 行布局
    gap: 10px;  // 间隙
    transition: .5s;
}
.item{
    background: #999;
}

@for $i from 1 through 9 {
    .item:nth-child(#{$i}){
        background: hsl($i*40%, 100%, 75%);  // hsl  调色盘 (调色盘旋转角度，饱和度，亮度)
    }
    .content:has(.item:nth-child(#{$i}):hover) {
        $r: floor(($i - 1 ) / 3 + 1);
        $c: ($i - 1 ) % 3 + 1;
        $arr: 1fr 1fr 1fr;
        $row: set-nth($list: $arr, $n: $r, $value: 2fr);
        $columns: set-nth($list: $arr, $n: $c, $value: 2fr);
        /* 当第一个.item处于hover状态时，改变.content的样式 */
        grid-template-columns: $columns;
        grid-template-rows: $row;
    }
}

// 子元素需要改变其父元素
// 使用伪元素 :has   只有在子元素被鼠标移入后才会选中父元素
// .content:has(.item:nth-child(1):hover) {
//     /* 当第一个.item处于hover状态时，改变.content的样式 */
//     grid-template-columns: 2fr 1fr 1fr;
//     grid-template-rows: 2fr 1fr 1fr;
// }

</style>