你如何制作一个动画，其中弹性框中的 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通常在父容器中调用。您将无法在子组件上使用两端内容移动每个项目的单个内容。

如果同时删除 .one 和 .three 上的两端对齐内容，您会注意到内容不会移动。您只能控制父母的证明内容。如果你想单独控制每个孩子，你需要他们在display: flex。

将鼠标悬停在父项 (.container( 上时，您可以添加flex-direction: row-reverse 。这将实现您在交换头寸时所寻找的目标。

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