制作两个项目相互远离的动画，直到达到容器轮廓

Question

对于介绍动画，我想根据外部容器的宽度设置两个元素的动画，使其能够响应。绝对定位对我来说不起作用，因为最初这两个项目必须相互接触，或者它们之间有一个恒定的固定距离。

以下是动画的表示：

body {
background: #707070;
text-align: center;
}
.content {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #f7f7f7;
}
.animated .content {
justify-content: space-between;
}

<section class="intro">
<h2>1. before animation</h2>
<div class="content">
<svg width="100" height="100">
<rect width="100" height="100" fill="blue" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="green" />
</svg>
</div>
</section>
<section class="intro animated">
<h2>2. after animation</h2>
<div class="content">
<svg width="100" height="100">
<rect width="100" height="100" fill="blue" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="green" />
</svg>
</div>
</section>
<section class="intro animated">
<h2>3. custom container size</h2>
<div class="content" style="width: 80%;">
<svg width="100" height="100">
<rect width="100" height="100" fill="blue" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="green" />
</svg>
</div>
</section>

Answer 1

我刚刚在SVG中间添加了一个div，当您单击Container时，我将向容器中添加动画类。在CSS中，我将把伪flex改为自动

document.getElementById("container").addEventListener("click", function() {
this.classList.add('animated');
});

body {
background: #707070;
text-align: center;
}
.content {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #f7f7f7;
}
.content.animated .dummy {
flex: auto;
}
.dummy {
flex: 0;
transition: flex 1s;
}

<section class="intro">
<h2>Click on container</h2>
<div id="container" class="content">
<svg width="100" height="100">
<rect width="100" height="100" fill="blue" />
</svg>
<div class="dummy"></div>
<svg width="50" height="50">
<rect width="50" height="50" fill="green" />
</svg>
</div>
</section>
</section>