sass网格布局动画

{/* 网格布局中的动画 */}
<div className="container">
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
    <div className="item" />
</div>

.container {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	width: 400px;
	height: 400px;
}

@for $i from 0 through 9 {
	.item:nth-child(#($i + 1)) {
		background-color: hsl($i * 40%, 100%, 74%);
	}
	.container.has(.item:nth-child(#{$i + 1}):hover) {
            $r: floor($i / 3 + 1); // 1-3
            $c: $i % 3 + 1; // 1-3
            $arr: 1fr 1fr 1fr;
            $rows: set-nth($arr, $r, 2fr);
            $cols: set-nth($arr, $c, 2fr);
            grid-template-rows: $rows;
            grid-template-columns: $cols;
	}
}

// 根据指定子元素找到它的父元素
.container:has(.item:nth-child(1):hover) {
	grid-template-rows: 2fr 1fr 1fr;
	grid-template-columns: 2fr 1fr 1fr;
}

.container:has(.item:nth-child(2):hover) {
	grid-template-rows: 2fr 1fr 1fr;
	grid-template-columns: 1fr 2fr 1fr;
}

.container:has(.item:nth-child(3):hover) {
	grid-template-rows: 2fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
}

.container:has(.item:nth-child(4):hover) {
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-columns: 2fr 1fr 1fr;
}

.container:has(.item:nth-child(5):hover) {
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-columns: 1fr 2fr 1fr;
}

.container:has(.item:nth-child(6):hover) {
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
}
.container:has(.item:nth-child(7):hover) {
	grid-template-rows: 1fr 1fr 2fr;
	grid-template-columns: 2fr 1fr 1fr;
}
.container:has(.item:nth-child(8):hover) {
	grid-template-rows: 1fr 1fr 2fr;
	grid-template-columns: 1fr 2fr 1fr;
}
.container:has(.item:nth-child(9):hover) {
	grid-template-rows: 1fr 1fr 2fr;
	grid-template-columns: 1fr 1fr 2fr;
}