Javascript 设置div演示文稿的动画-从中心放大

我想在用户按下网页上的按钮后显示

div

。我希望

div

从屏幕中央向内缩放。我希望在创建新文档时实现与iCloud中类似的效果。如何才能达到这样的效果

div

的内容将是静态和可滚动的，它将由一个工具栏组成，带有一个按钮，与iCloud上的元素非常相似

---

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

这是一个普通的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'）；
});
});
#切换{光标：指针；}
#容器{
宽度：95vw；
高度：95vh；
背景：蓝色；
溢出：自动；
}
#窗口{
宽度：80vw；
高度：80vh；
背景：红色；
位置：固定；
顶部：10vh；
左：10vw；
不透明度：0；
z指数：100；
溢出：自动；
变换：缩放（0,0）；
过渡属性：不透明度、变换；
过渡时间：1s；
}
#窗户打开了{
显示：块；
变换：比例（1,1）；
不透明度：1；
}

打开并关闭窗口
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆·埃拉特·洛雷姆，欧盟封建制的特级品，调味品，无牌权杖。Mauris auctor ipsum justo，位于布兰迪特·洛伦·佩伦茨克a。在这片土地上，交通工具的危险性，暂时的不存在。
埃尼安·拉奥里特·努克·多洛（Aenean laoreet nunc dolor）是一位贵族，他与梅特斯·廷西登（metus tincidunt）在一起。生活是一种基本要素，是一种不平等的生活。生活是一种痛苦。这是一个很好的例子。杜伊斯·里索斯·马萨，费吉亚特·奎斯
nibh eget，iaculis cursus purus。纳姆·乌兰科珀在埃拉特·奎斯·库苏斯。Proin nec ornare lectus，在Dignessim sem上。塞德·布兰迪特·阿库利（Sed blandit accumsan dui）是一种弓形矢状体。梅塞纳·尼布·安特，埃尼姆等人的accumsan，莫利斯·埃吉斯塔·伊普森。塞德·康瓦利斯·维塔酒店
尼布·阿利奎特。乌兰姆科珀乌兰姆科珀是普尔文纳的生命。不要吃猫粮。这是一只猫，这是一只金龟，这是一只金龟。这是一个不可能实现的目标，最大限度地实现这一目标。佩伦茨克威尼斯人马萨奎斯酒店
厄洛斯·卢库斯·泰姆。在nunc的非侵权者和食品拍卖人nec。奥迪奥特卢斯万岁，人命关卡，人命关卡。威尼斯前拍卖人。Fusce non nisi nunc。玛利苏达之前的晨曦
多洛尔·康瓦利斯和纳姆·尼布·厄罗斯、索利西图丁·塞德·特里斯蒂克·内克、普尔文纳调味品努克。无便利。埃涅亚·埃吉斯塔在酒后驾车，威严威严的人在酒后驾车。请不要让我去法雷特拉。塞德·阿克里苏斯·夸姆。自由党
天哪，你坐在我的椅子上，我坐在你的椅子上。舌苔，舌苔，口头禅，爱欲。在venenatis enim luctus porta的一家名为Sed tempus sem erat的大型临时ac.Curabitur hendrerit molestie orci的医疗机构。
Vivamus varius ligula eu dui dictum，ac venenatis libero euismod。在梅特斯·特里斯提克，弗林蒂利亚·莫里斯·埃利芬德的生活中，泰瑟·尼伯被供奉。埃尼安和朗卡斯·努克。塞德·埃吉特·厄罗斯·内克。不要在中间地带吃东西，不要吃东西。
Nam eu ultricies mi，身份证拍卖人leo。这是欧盟的封建主义宣言。多奈克发酵液是一种天然发酵液。在拉齐尼亚，利奥·内克·奥纳雷·特里斯蒂克、毛里斯·阿尔库·洛博蒂斯·艾利特、尤伊斯莫·珀鲁斯·拉库斯·尼布。弗林斯菲利斯ac奥古斯整数酒店
洛博蒂斯，自由饮食联盟。埃尼安在门楣上坐了下来。这是一种新的元素。马萨和康格的布兰迪效率。毛里斯·内克·托托猫。这是马萨的最大功劳，
我是奥迪奥·拉奥里特将军。塞德·拉奥里特·乌尔纳。我是佩伦茨克·奥古斯。最后前庭，非菱形前庭。莫里斯·威尼纳提斯·塞姆，佩伦茨克·波苏尔·布朗迪特。塞德·洛雷姆·埃尼姆、普雷蒂姆·维塔赫·费利斯、，
第三个是同侧。非前侵权人的Vivamus。虎口浮雕和肘部浮雕同侧前庭

以下是仅使用javascript的解决方案，没有Jquery

垂直和水平居中div的CSS：

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

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

    margin: auto;

    }


#面板{
显示：无；
宽度：1%；
身高：1%；
背景色：红色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}

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>


var i=30；
函数show（）{
panel=document.getElementById（'panel'）；
panel.style.display='block'；
setTimeout（函数（）{change（panel）}，10）；
}
功能更改（面板）{
panel.style.width=i+“%”
panel.style.height=i+“%”
我++
如果（i<90）显示（）
}

演示：
一般来说，最好使用CSS制作动画。它的性能要好得多，而且不支持javascript引擎。但是，如果您使用javascript制作动画，最好使用window.requestAnimationFrame，而不是在循环中进行。这太棒了！请注意，某些属性需要浏览器前缀，否则它看起来不太正确。例如，除非使用
-webkit-
作为转换前缀，否则Safari不会放大。我很高兴能提供帮助