悬停时网格项目平滑过渡

Question

我有一张默认为 3 列 2 行 (3x2) 的表格。当 on :hover 发生时，它变成 2 列 3 行 (2x3)

默认---(3x2):

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

| 🐟 鱼 | 🐱 猫 | 🐶 狗 |

悬停时 (2x3)：

| 🐱 猪 | 🐦 皮江 |

| 🐢 乌龟 | 🐟 鱼 |

| 🐱 猫 | 🐶 狗 |

我想要实现的目标：

所以当悬停发生时。我希望单元格移动（动画）到其目的地，以一种飞翔的方式移动到它的单元格，并在我从那里移除光标时以相同的方式返回。

例如，我想看到海龟 (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%);
}

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