动画div演示 - 从中​​心放大

Question

我想在用户按下网页上的按钮后显示div。我希望div从屏幕中心向内缩放。我希望获得类似于iCloud中用于创建新文档的效果。如何实现这样的效果？

div的内容将是静态和可滚动的，它将包含一个工具栏，其中的按钮与iCloud上的元素非常相似。

如果可能的话，纯JavaScript解决方案会很棒，但我可以使用jQuery。

Answer 1

这是OP要求的Vanilla JS解决方案。 没有后备的原因是使代码段更小。

document.addEventListener('DOMContentLoaded', function() {

  var toggle = document.getElementById('toggle'),
    window = document.getElementById('window');
  toggle.addEventListener('click', function() {
    window.classList.toggle('opened');
  });

  close.addEventListener('click', function() {
    window.classList.remove('opened');
  });

});

#toggle {cursor: pointer;}
#container {
  width: 95vw;
  height: 95vh;
  background: blue;
  overflow: auto;
}
#window {
  width: 80vw;
  height: 80vh;
  background: red;
  position: fixed;
  top: 10vh;
  left: 10vw;
  opacity: 0;
  z-index: 100;
  overflow: auto;
  transform: scale(0, 0);
  transition-property: opacity, transform;
  transition-duration: 1s;
}
#window.opened {
  display: block;
  transform: scale(1, 1);
  opacity: 1;
}

<div id="container">
  <button id="toggle">Open & Close the window</button>
  <div id="window">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat lorem, consequat eu feugiat ultrices, condimentum scelerisque nulla. Mauris auctor ipsum justo, at blandit lorem pellentesque a. Nunc vel est luctus, vehicula risus id, tempor nulla.
      Aenean laoreet nunc dolor, sed feugiat metus tincidunt at. Quisque elementum suscipit enim, vitae ultrices est aliquam id. Quisque cursus tortor sit amet fringilla dapibus. Aliquam interdum a turpis dictum lacinia. Duis risus massa, feugiat quis
      nibh eget, iaculis cursus purus. Nam ullamcorper in erat quis cursus. Proin nec ornare lectus, at dignissim sem. Sed blandit accumsan dui, a sagittis arcu iaculis a. Maecenas nibh ante, accumsan in enim et, mollis egestas ipsum. Sed convallis vitae
      nibh ut aliquet. Ut ullamcorper ullamcorper enim vitae pulvinar. Donec vitae tincidunt felis. Ut felis lacus, cursus vel rutrum ut, maximus sed metus. Aenean nisl nulla, maximus ut facilisis a, tristique eu quam. Pellentesque venenatis massa quis
      eros luctus tempor. Praesent quis quam non tortor imperdiet auctor nec in nunc. Vivamus odio tellus, placerat porta urna vitae, congue tincidunt urna. Nulla auctor pretium venenatis. Fusce non nisi nunc. Morbi pretium malesuada enim, vitae cursus
      dolor convallis et. Nam nibh eros, sollicitudin sed tristique nec, pulvinar condimentum nunc. Nulla facilisi. Aenean egestas velit dui, vel dignissim enim suscipit euismod. Donec euismod eleifend mi ut pharetra. Sed ac risus quam. Nullam libero
      diam, tempus sit amet convallis ut, bibendum viverra sapien. Aliquam tellus ligula, egestas ac dictum ut, efficitur eget eros. Sed tempus sem erat, eget efficitur magna tempor ac. Curabitur hendrerit molestie orci, at venenatis enim luctus porta.
      Vivamus varius ligula eu dui dictum, ac venenatis libero euismod. Sed consectetur nibh in metus tristique, vitae fringilla mauris eleifend. Aenean et rhoncus nunc. Sed eget eros neque. Donec pretium interdum risus, sed cursus nulla euismod sagittis.
      Nam eu ultricies mi, id auctor leo. Quisque dictum urna eu dictum feugiat. Donec fermentum mi sed diam posuere luctus. In lacinia, leo nec ornare tristique, mauris arcu lobortis elit, sed euismod purus lacus ut nibh. Integer fringilla felis ac augue
      lobortis, ut commodo libero imperdiet. Aenean at metus vel ligula porttitor varius sed sit amet dolor. Aenean sodales nisl nec urna tristique elementum. Maecenas blandit efficitur massa et congue. Mauris nec tortor felis. Ut vulputate maximus massa,
      sed commodo odio laoreet vel. Sed eu laoreet urna. Cras id pellentesque augue. Vestibulum finibus leo non lectus rhoncus vehicula. Mauris dignissim venenatis sem, quis pellentesque risus posuere blandit. Sed lorem enim, pretium vitae felis sed,
      tincidunt semper ipsum. Vivamus non ex tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </div>
</div>

Answer 2

以下是仅限javascript的解决方案，没有Jquery。

CSS对于垂直和水平的居中div：

<style>
    #panel{
      display:none;
      width: 1%;
    height: 1%;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

    }

Javascript：

<script>
    var i = 30;
    function show(){
      panel = document.getElementById('panel');

      panel.style.display = 'block';


      setTimeout(function(){change(panel)}, 10);
    }
    function change(panel){

       panel.style.width = i+"%"
       panel.style.height = i+"%"       
       i++
       if (i < 90) show()
    }
  </script>

演示：http://jsbin.com/madaku