点击按钮上的飞入内容框？

Question

我试图创建两个按钮点击时出现的动画框，类似于＆＃34;关于我＆＃34;点击http://riccardozanutta.com/。我无法弄清楚他是怎么做到的，所以我决定用模态来解决它。但是，当我使用两个单独的盒子时，我在同时使两个盒子动画时遇到了麻烦。当我有一个带有两个不同div的模态时，我能够让它工作，如：

<div id="myModal" class="modal col-xs-12 col-lg-6">
  <!-- Modal content -->
  <div class="modal-content1">
    <span class="close">&times;</span>
    <h2>About Me</h2>
    <p>blah blah>
  </div>
  <div class="modal-content2 col-xs-12 col-lg-6">
    <span class="close">&times;</span>
    <h2>Super powers</h2>
    <p>blah blah>
  </div>
</div>

然而，它只是一个动画，它们没有像我喜欢的那样连在一起（它也让它们从不同的区域进入）。模态我需要做什么，还是有更好的方法？虽然我试图找到例子，但我没有找到任何有两个盒子的例子。我很欣赏正确方向的任何指针。提前谢谢！

Answer 1

您可以使用this并尝试尽可能接近您的愿景。我只是分叉它，并编辑了一点，为你提供一个例子和一个工作的地方，找到你的完美解决方案。祝你好运！

以下是示例代码： 的 JS

var test = document.getElementById('test');
var test1 = document.getElementById('test1');

function translate(elem, x, y) {
  var left = parseInt(css(elem, 'left'), 10),
    top = parseInt(css(elem, 'top'), 10),
    dx = left - x,
    dy = top - y,
    i = 1,
    count = 20,
    delay = 20;

  function loop() {
    if (i >= count) {
      return;
    }
    i += 1;
    elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
    elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';
    setTimeout(loop, delay);
  }

  loop();
}

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onclick = function(e) {
  var arr;

  if (e.target.nodeName === 'BUTTON') {
    test.style.cssText = 'visibility:visible;';
    translate(test, +50, +50);
    test1.style.cssText = 'visibility:visible;';
    translate(test1, +200, +50);
  }
};

<强> HTML

<button title="100 100">Translate to (100, 100)</button>

  <!-- Modal content -->
  <div id="test">
    <span class="close">&times;</span>
    <h2>About Me</h2>
    <p>blah blah>
  </div>

  <div id="test1">
    <span class="close">&times;</span>
    <h2>Super powers</h2>
    <p>blah blah>
  </div>

<强> CSS

#test {
  position: absolute;
  left: 50px;
  top: 500px;
  visibility: hidden;
}
#test1 {
  position: absolute;
  left: 100px;
  top: -500px;
  visibility: hidden;
}