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

Posted 2023-03-04

【中文标题】动画两个项目彼此远离，直到碰到容器轮廓

【英文标题】：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  >
      <rect   fill="blue" />
    </svg>

    <svg  >
      <rect   fill="green" />
    </svg>
 </div>
</section>

<section class="intro animated">
    <h2>2. after animation</h2>
    <div class="content">
      <svg  >
        <rect   fill="blue" />
      </svg>

      <svg  >
        <rect   fill="green" />
      </svg>
   </div>
</section>

<section class="intro animated">
    <h2>3. custom container size</h2>
  <div class="content" style="width: 80%;">
    <svg  >
      <rect   fill="blue" />
    </svg>

    <svg  >
      <rect   fill="green" />
    </svg>
 </div>
</section>

【问题讨论】：

"我想..."[填空] 此处不在主题with no effort from you to solve this. - 这不是本网站的目的。我们很乐意回答有关您编写的代码的编程/调试问题。试一试，返回一些不起作用的代码，我们会为您提供帮助。

这份关于requestanAimationFrame 的文档以及其中的示例会让您大开眼界。

@RandyCasburn 感谢您的建设性批评，但我在社区中的努力是毋庸置疑的。我在这里有一个逻辑问题，我的时间有限。不乏编码技能，因此提出一个无效的解决方案是没有意义的。但是你已经帮助了我，因为你的评论给了我一个想法。我只是使用条件为元素设置动画，直到其外部容器的左偏移量达到 0，而右元素的右偏移量。谢谢:)

很公平 - 我不是在质疑你的“在社区中的努力” - 我是在询问你的调试细节 - 下次我会尽量说得更清楚。很高兴你在路上。祝你好运，玩得开心！

【参考方案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  >
      <rect   fill="blue" />
    </svg>

    <div class="dummy"></div>

    <svg  >
      <rect   fill="green" />
    </svg>
  </div>
</section>

</section>

【讨论】：

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