借助阿里AntUI元素实现两个Web页面之间的过渡——“Loading…”

今天遇到了这么个问题，如下：功能需求：有两个页面A和B，点击A中的确定按钮，超链接到页面B，在跳转到B页面时出现“Loading”的样式。需求分析：作为一个后端程序员，一开始想到的是，在页

今天遇到了这么个问题，如下：

功能需求：有两个页面A和B，点击A中的"确定"按钮，超链接到页面B，在跳转到B页面时出现“Loading”的样式。

需求分析：作为一个后端程序员，一开始想到的是，在页面A上放一个div，div里放一张loading的gif图片，最开始的时候该div是隐藏的，然后点击"确定"时，将该div显示出来。

实践效果：在网上随便找了一张在后端看着还不错的gif loading图片，然后按照上面的思路来做，结果是我始料未及的。一是随便找的gif大小和色调都和当前整个web不搭，二是显示的位置不在中央，三是反正给后端的感觉就是很矬！

思考纠正：项目是基于支付宝服务窗和微信服务号的，整个样式都是用的支付宝的AntUI（http://am-team.github.io/antui/nav.html#info）。结果再次看文档的时候发现有个Toast提示的UI元素，然后再次思考如下，在按钮的点击事件中，先将Loading效果的html内容追加到页面A的body元素中，然后再跳转到页面B。

代码如下：

页面使用了一个布局页，然后引入toast.css文件，当然，还有一个其他样式文件。

@{ ViewBag.Title = "温馨提示"; Layout = "~/Views/Shared/_amuiLayout.cshtml";}@section style{ @*引入toast样式*@}

2.以下是“确认”按钮的代码。

3.下面是点击按钮执行的代码。

1

最终效果：

最后小结：该功能确实很简单，但是对于自己也是一个学习的过程，学习了阿里的AntUI框架，同时该博文也算是自己学习中小小的笔记吧，方便自己日后查阅。如果您也有同样的需求，望各位笑纳!