Javascript 使用动画更改模式内容和调整窗口大小

我有一个显示表单的模式，在提交表单时，我想隐藏表单的内容，而不是显示固定大小100px x 100px的ajax指示器。问题是如何通过一些动画将模式的宽度/高度降低到100x100，并将该模式保持在屏幕中心

<div class="modal">
    <form>
    ....
    </form>
    <div class="ajax-indicator hidden"></div>
</div>

....

单击“提交”按钮后

<div class="modal">
    <form class="hidden">
    ....
    </form>
    <div class="ajax-indicator"></div>
</div>

....

创建一个css类，您可以将其添加到模式中，将其大小设置为100x100。如果您使用边距0自动将模态居中，它应该自动调整自身。然后在加载完成后删除该类

关于动画，您可以将transition:all.5s添加到.modal类中

例如：

css:

html

---

创建多个阶段（CSS类）并使用js事件激活它们。

您可以使用一些事件处理程序来实现动画，例如：

click,transitionend,submit...

然后换一个对应的类

Css

#box{
 position:fixed;
 width:0px;
 height:0px;
 top:0%;
 left:0%;
 background-color:black;
 margin-left:0px;
 margin-top:0px;
 -webkit-transition:all 700ms ease;
 overflow:hidden;
 border-radius:0px;
}
#box.active{
 width:300px;
 height:300px;
 top:50%;
 left:50%;
 margin-top:-150px;
 margin-left:-150px;
 border-radius:0px;
}
#box.loading{
 width:100px;
 height:100px;
 top:50%;
 left:50%;
 margin-top:-50px;
 margin-left:-50px;
 border-radius:100px;
}

js

#box{
 position:fixed;
 width:0px;
 height:0px;
 top:0%;
 left:0%;
 background-color:black;
 margin-left:0px;
 margin-top:0px;
 -webkit-transition:all 700ms ease;
 overflow:hidden;
 border-radius:0px;
}
#box.active{
 width:300px;
 height:300px;
 top:50%;
 left:50%;
 margin-top:-150px;
 margin-left:-150px;
 border-radius:0px;
}
#box.loading{
 width:100px;
 height:100px;
 top:50%;
 left:50%;
 margin-top:-50px;
 margin-left:-50px;
 border-radius:100px;
}

在本例中，我使用了一个带有

setTimeout

的假加载时间，在单击submit btn后持续2秒

function clk(e){
 box.classList.add('active');
}
function frm(e){
 e.preventDefault();
 box.classList.remove('active');
 box.classList.add('loading');
    setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
    box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);

演示

这个例子使用了现代技术。。在所有最新的浏览器上工作。。。chrom，firefox ie10 opera ios android

也许您需要添加自定义前缀，如

-webkit-moz-o

这里是另一个使用延迟开关的示例，它对于完全隐藏最后的窗口非常重要

---

单击“提交”按钮后，更改模型框的css

var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";

并将ajax指示器div position设置为center，以使模型位于中心

var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";

---

很好的动画。你不再需要前缀来进行转换了。是的，我知道。。但一些ios设备和android无法更新。。。所以那会更好。删除我之前的评论-我误解了你写的内容。没错，如果你必须支持旧的移动设备，那么你就需要前缀。

var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";

var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";