按鈕點擊飛入內容框？

Question

我正在嘗試創建兩個出現在按鈕上的動畫框，類似於「關於我」在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; 
}