动画两个项目彼此远离，直到碰到容器轮廓答案

【问题标题】：Animate two items moving away from each other until hitting container outline动画两个项目彼此远离，直到碰到容器轮廓
【发布时间】：2022-01-12 22:27:24
【问题描述】：

对于介绍性动画，我想根据外部容器宽度对两个元素进行动画处理，以使其具有响应性。绝对定位对我不起作用，因为最初这两个项目必须相互接触或它们之间具有恒定的固定距离。

这是动画的表示：

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>

【问题讨论】：

"我想..."[填空] 此处不在主题with no effort from you to solve this. - 这不是本网站的目的。我们很乐意回答有关您编写的代码的编程/调试问题。试一试，返回一些不起作用的代码，我们会为您提供帮助。
这份关于requestanAimationFrame 的文档以及其中的示例会让您大开眼界。
@RandyCasburn 感谢您的建设性批评，但我在社区中的努力是毋庸置疑的。我在这里有一个逻辑问题，我的时间有限。不乏编码技能，因此提出一个无效的解决方案是没有意义的。但是你已经帮助了我，因为你的评论给了我一个想法。我只是使用条件为元素设置动画，直到其外部容器的左偏移量达到 0，而右元素的右偏移量。谢谢:)
很公平 - 我不是在质疑你的“在社区中的努力” - 我是在询问你的调试细节 - 下次我会尽量说得更清楚。很高兴你在路上。祝你好运，玩得开心！

标签： javascript html css animation css-animations

【解决方案1】：

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

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>

【讨论】：

感谢您，这是我一直在寻找的智能解决方案！我的方法有点复杂:)