需要帮助使用 CSS 实现悬停时平滑的网格项目过渡

Question

问题：

我要么傻，要么太傻，我可能把事情复杂化了。但我感到非常沮丧，所以我正在寻求帮助。所以我有这个表，默认情况下是 3 列 2 行 (3x2)，当 on:hover 发生时，它会变成 2 列 3 行 (2x3)

默认---(3x2)

| 🐱 猪 | 🐦 皮江 | 🐢 海龟 |

| 🐟 鱼 | 🐱 猫 | 🐶 狗 |

悬停时 (2x3)

| 🐱 猪 | 🐦 皮江 |

| 🐢 乌龟 | 🐟 鱼 |

| 🐱 猫 | 🐶 狗 |

我想要实现的目标：

所以当悬停发生时。我希望单元格移动（动画）到它的目的地。就像苍蝇一样移动到它的cel，然后当我从那里移开光标时以同样的方式返回。例如，我想看到海龟 (col 3 cel 1) 移动到 (col 1 cel 2)。现在它只是静态地变成 3x2 或 2x3，或者通过我的其他尝试，它移到桌子之外。但我只是想要一个平滑的过渡或缓入/缓出，不知道如何称呼它？

.main {
    width: 80%;
    display: flex;
    align-items: center;
    align-content: center;
}

.root {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(3, 1fr);

}

.root:hover {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(2, 1fr);
}

.col {
    column-span: 1;
    border: solid 1px black;
    background-color: red;
    transition: all 300ms ease;
}


.root:hover .col:nth-child(1) {
    transform: translate(50%, 0);
}

.root:hover .col:nth-child(2) {
    transform: translate(100%, 0); 
}

.root:hover .col:nth-child(3) {
    transform: translate(0, 100%);
}

.root:hover .col:nth-child(4) {
    transform: translate(50%, 100%); 
}

.root:hover .col:nth-child(5) {
    transform: translate(100%, 100%); 
}

.root:hover .col:nth-child(6) {
    transform: translate(0, 200%);
}

 <div class="main">
        <div class="root">

            <div class="col">
                <label>
                   pig
                </label>
            </div>

            <div class="col">
                <label>
                  pidgeon
                </label>
            </div>

            <div class="col">
                <label>
                    turtle
                </label>
            </div>

            <div class="col">
                <label>
                    fish
                </label>
            </div>

            <div class="col">
                <label>
                    cat
                </label>
            </div>

            <div class="col">
                <label>
                    dog
                </label>
            </div>
        </div>
    </div>

Answer 1

根据您的问题，我对代码进行了一些修改，以在单元格悬停时重新排列时达到所需的过渡效果。这是我想出的代码：

    width: 80%;
    display: flex;
    align-items: center;
    align-content: center;
}

.root {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(3, 1fr);

}

.root:hover {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(2, 1fr);
}

.col {
    column-span: 1;
    border: solid 1px black;
    background-color: red;
    transition: all 300ms ease;
}


.root:hover .col:nth-child(1) {
    transform: translate(0%, 0);
}

.root:hover .col:nth-child(2) {
    transform: translate(0%, 0); 
}

.root:hover .col:nth-child(3) {
    transform: translate(0, 0%);
}

.root:hover .col:nth-child(4) {
    transform: translate(0%, 0%); 
}

.root:hover .col:nth-child(5) {
    transform: translate(0%, 0%); 
}

.root:hover .col:nth-child(6) {
    transform: translate(0, 0%);
}

请注意，虽然我相信此代码应该符合您的要求，但如果有任何不准确之处，我深表歉意。请随意测试一下，让我知道它是否符合您的期望。