您如何制作动画，其中弹性框中的两个元素将交换位置答案

【问题标题】：How do you make an animation where 2 elements in a flex box will swap places您如何制作动画，其中弹性框中的两个元素将交换位置
【发布时间】：2018-03-20 01:34:26
【问题描述】：

这是我的一些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 将切换位置的动画中转换。我现在对动画所做的是将对齐的内容从开始移动到结束和结束开始并将其应用于一和三，当我悬停容器时动画开始，但它不起作用，我的问题是什么？

【问题讨论】：

Swap DIV position with CSS only的可能重复
不，我正在尝试将它们与动画交换。
无法为非数字属性设置动画。
好的，谢谢，我会试着把它改造成别的东西。

标签： html css flexbox css-animations

【解决方案1】：

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

如果您删除 .one 和 .three 上的 justify-content，您会注意到内容没有移动。您只能控制父母的理由内容。如果你想单独控制每个孩子，你需要他们在display: flex中。

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

在.container:hover 中的 css 末尾签出此Plunker，您可以删除每行上的 cmets，看看我在说什么。

【讨论】：