javascript - 在 div 之间转换时显示加载图标

Question

我有一个表单，当单击“下一步”按钮时，会出现一个新的 div 来代替旧的 div，代码如下:

function showDiv() {
                   
                    
                    
                    document.getElementById('2').style.display="block";
                    document.getElementById('1').style.display="none";
                   
                    
                }

然后，一旦提交了表单，我就会将我的数据发送到服务器，以便通过电子邮件将其发送给我。问题在于之前的操作，即单击按钮后 div 之间的转换，执行得太快了。人们告诉我，使用某种过渡或快速加载图标看起来会好很多，但它看起来并不真实。

有没有办法让我的第二个 div“滑”到新的位置？还是某种过渡？请记住，这只是将两个 div 相互切换。尚未处理实际数据，也未加载新页面。或者有什么方法可以在此操作上创建一个持续 1 秒的加载图标？

感谢您的帮助。

Answer 1

试试这个

// send data
// show loading gif
setTimeout(function () {
     // hide loading gif
     // show other div
}, 2000);

这样你会得到 2 秒的延迟。希望对您有所帮助。