html - 你如何制作一个动画，其中 flex 盒子中的 2 个元素将交换位置

Question

这是我的一些html代码

<div class="container">
    <div class="number one">1</div>
    <div class="number">2</div>
    <div class="number three">3</div>
</div>

还有我的CSS

    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: red;
        width: 150px;
        margin: 4px;
        margin-top: 9px;
        box-shadow: 4px 4px 6px black;
    }

    .number {
        padding: 4px;
        margin-left: 8px;
        margin-right: 8px;
        background-color: navy;
    }

    .one {
        text-decoration: none;
        color: white;
        justify-content: flex-start;
    }

    .three {
        justify-content: flex-end;
    }

    @keyframes justATest {
        from {
            justify-content: flex-start;
        }
        to {
            justify-content: flex-end;
        }
    }

    @keyframes justATest2 {
        from {
            justify-content: flex-end;
        }
        to {
            justify-content: flex-start;
        }
    }

    .container:hover .one {
        animation: justATest;
        animation-duration: 4s;
    }

    .container:hover~.three {
        animation: justATest2;
        animation-duration: 4s;
    }

所以我的问题是我的代码有什么问题，我正在尝试让动画与动画一起转换，其中 .one 和 .three 将切换位置。 我现在对动画所做的是将对齐的内容从开始移动到结束，然后将其应用于一和三，当我悬停容器时动画开始，但它不起作用，我的问题是什么？

Answer 1

@AIDANKUKOSKY 通常在父容器中调用 justify-content 的使用。您将无法移动子组件上带有 justify-content 的每个元素的单独内容。

如果您删除 .one 和 .three 上的 justify-content，您会注意到内容不会移动。您只能控制 parent 证明内容。如果您想单独控制每个 child ，您需要将它们放在 display: flex 中。

悬停在父级 (.container) 上时，您可以添加 flex-direction: row-reverse。这将实现您在交换职位时所寻求的。

检查这个 Plunker在 .container:hover 中的 css 末尾，您可以删除每一行的注释，看看我在说什么。