动画化两个项目相互远离，直到碰到容器轮廓

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 时，我将向容器添加动画 class。在 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>

动画化两个项目相互远离，直到碰到容器轮廓

Animate two items moving away from each other until hitting container outline

html

javascript

css

animation

css-animations