javascript - 动画 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>