javascript - 多个 CSS 动画对齐问题

Question

我一直在尝试触发同时放置在两个不同位置的两个动画，以通过 JavaScript - {{id}}.className 使它们彼此远离。但是一旦动画开始，id 为 p2 的第二个元素就会在动画开始之前自动从其原始位置移动。

Here是我的代码笔链接。是的，我正在为此使用 Bootstrap。

谁能帮帮我？

Answer 1

已更新

当您点击按钮时，您从两个 div 中删除了所有 class 值。

所以只需替换:

e2.className = "pop2";
e1.className = "pop1";

作者:

e2.classList.add('pop2');
e1.classList.add('pop1');

这会将新的 class(pop1 和 pop2)添加到默认存在的其他类(col-sm-7 和 col-sm-5)中，并且效果很好。