我有一个HTML和CSS进度条。我现在需要的是，它应该加载一个完整的页面。有什么办法吗？

//这是我的HTML 这里我需要的是，在进度条完全加载后，它应该重定向到另一个页面。 有什么办法吗

.文本中心{ 文本对齐：居中； } .集装箱{ 左：50%； 位置：绝对位置； 最高：50%； 转化：转化-50%，-50%； } .进展{ 背景色：e5e9eb； 高度：0.25em； 位置：相对位置； 宽度：24em； } .进度条{ -webkit动画持续时间：3s； -webkit动画名称：宽度； 背景：右线性梯度，4cd964，5ac8fa，007aff，34aadc，5856d6，ff2d55； 背景尺寸：24em 0.25em； 身高：100%； 位置：相对位置； } .进步阴影{ 背景图像：线性渐变至底部，eaecee，透明； 高度：4em； 位置：绝对位置； 最高：100%； 变换：45度； 变换原点：0； 宽度：100%； } /*动画*/ @关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } @-webkit关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } 加载 简单使用。他是为transitionend做的，但我们可以换成animationend

他的技巧是循环浏览所有供应商前缀和本机animationend事件的列表，并检查浏览器是否支持其中任何一个事件。然后，他将已识别的animationend处理程序附加到感兴趣的元素

当激发animationend事件时，我们只需使用window.location.replace重定向到感兴趣的URL

我对其进行了修改，使其适用于您的场景：

$(function() {

    // Check with animationend event is supported by browser
    function whichAnimationEvent(){
        var t;
        var el = document.createElement('fakeelement');
        var animations = {
          'animation':'animationend',
          'OAnimation':'oAnimationEnd',
          'MozAnimation':'animationend',
          'WebkitAnimation':'webkitAnimationEnd'
        }

        for(t in animations){
            if( el.style[t] !== undefined ){
                return animations[t];
            }
        }
    }

    // Listen for animation
    var animationEvent = whichAnimationEvent(),
        progress = document.getElementsByClassName('progress-bar')[0];

    animationEvent && progress.addEventListener(animationEvent, function() {
        // Alert (to demonstrate the code works)
        alert('Animation complete!  This is the callback, no library needed!');

        // Redirect script
        window.location.replace('/path/to/url');
    });
});

请参见此处的小提琴：

只需使用即可。他是为transitionend做的，但我们可以换成animationend

他的技巧是循环浏览所有供应商前缀和本机animationend事件的列表，并检查浏览器是否支持其中任何一个事件。然后，他将已识别的animationend处理程序附加到感兴趣的元素

当激发animationend事件时，我们只需使用window.location.replace重定向到感兴趣的URL

我对其进行了修改，使其适用于您的场景：

$(function() {

    // Check with animationend event is supported by browser
    function whichAnimationEvent(){
        var t;
        var el = document.createElement('fakeelement');
        var animations = {
          'animation':'animationend',
          'OAnimation':'oAnimationEnd',
          'MozAnimation':'animationend',
          'WebkitAnimation':'webkitAnimationEnd'
        }

        for(t in animations){
            if( el.style[t] !== undefined ){
                return animations[t];
            }
        }
    }

    // Listen for animation
    var animationEvent = whichAnimationEvent(),
        progress = document.getElementsByClassName('progress-bar')[0];

    animationEvent && progress.addEventListener(animationEvent, function() {
        // Alert (to demonstrate the code works)
        alert('Animation complete!  This is the callback, no library needed!');

        // Redirect script
        window.location.replace('/path/to/url');
    });
});

---

请看这里的小提琴：

好的，我完全找到了解决方案。 如果任何人对此有任何问题，请报告

函数whichAnimationEvent{ 变量t； var el=document.createElement'fakeelement'； 变量动画={ “动画”：“动画结束”， “OAnimation”：“oAnimationEnd”， “MozAnimation”：“animationend”， “WebkitAnimation”：“webkitAnimationEnd” }; 对于动画中的t{ 如果el.style[t]！==未定义{ 返回动画[t]； } } } 函数oload{ var animationEvent=whichAnimationEvent， progress=document.getElementsByClassName'progress-bar'[0]； animationEvent&&progress.AddEventListenerationEvent，函数{ window.location.replacehttp://alokraj68.in; }; } //听动画片 html， 身体{ 身高：100%； } 身体{ 背景色：f5f7f9； 颜色：6C6C； 字体：3001EM/1.5emHelvetica Neue，无衬线； 保证金：0； 位置：相对位置； } h1{ 字号：2.25em； 字号：100； 线高：1.2米； 边缘：0.1.5em； } .文本中心{ 文本对齐：居中； } .集装箱{ 左：50%； 位置：绝对位置； 最高：50%； 转化：转化-50%，-50%； } .进展{ 背景色：e5e9eb； 高度：0.25em； 位置：相对位置； 宽度：24em； } .进度条{ -webkit动画持续时间：3s； -webkit动画名称：宽度； 背景：右线性梯度，4cd964，5ac8fa，007aff，34aadc，5856d6，ff2d55； 背景尺寸：24em 0.25em； 身高：100%； 位置：相对位置； } .进步阴影{ 背景图像：线性渐变至底部，eaecee，透明； 高度：4em； 位置：绝对位置； 最高：100%； 变换：45度； 变换原点：0； 宽度：100%； } /*动画*/ @关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } @-webkit关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } alokraj68。正在加载！！ alokraj68.in 加载

---

好的，我完全找到了解决办法。 如果任何人对此有任何问题，请报告

函数whichAnimationEvent{ 变量t； var el=document.createElement'fakeelement'； 变量动画={ “动画”：“动画结束”， “OAnimation”：“oAnimationEnd”， “MozAnimation”：“animationend”， “WebkitAnimation”：“webkitAnimationEnd” }; 对于动画中的t{ 如果el.style[t]！==未定义{ 返回动画 离子[t]； } } } 函数oload{ var animationEvent=whichAnimationEvent， progress=document.getElementsByClassName'progress-bar'[0]； animationEvent&&progress.AddEventListenerationEvent，函数{ window.location.replacehttp://alokraj68.in; }; } //听动画片 html， 身体{ 身高：100%； } 身体{ 背景色：f5f7f9； 颜色：6C6C； 字体：3001EM/1.5emHelvetica Neue，无衬线； 保证金：0； 位置：相对位置； } h1{ 字号：2.25em； 字号：100； 线高：1.2米； 边缘：0.1.5em； } .文本中心{ 文本对齐：居中； } .集装箱{ 左：50%； 位置：绝对位置； 最高：50%； 转化：转化-50%，-50%； } .进展{ 背景色：e5e9eb； 高度：0.25em； 位置：相对位置； 宽度：24em； } .进度条{ -webkit动画持续时间：3s； -webkit动画名称：宽度； 背景：右线性梯度，4cd964，5ac8fa，007aff，34aadc，5856d6，ff2d55； 背景尺寸：24em 0.25em； 身高：100%； 位置：相对位置； } .进步阴影{ 背景图像：线性渐变至底部，eaecee，透明； 高度：4em； 位置：绝对位置； 最高：100%； 变换：45度； 变换原点：0； 宽度：100%； } /*动画*/ @关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } @-webkit关键帧宽度{ 0%, 100% { 过渡计时功能：立方贝塞尔1,0,0.65,0.85； } 0% { 宽度：0； } 100% { 宽度：100%； } } alokraj68。正在加载！！ alokraj68.in 加载

---

我也想知道这个！为你做了一个jsfiddle也想知道这一点！为您制作了一个JSFIDLE它在JSFIDLE中工作得非常完美。但不是在我的服务器上，请按JS提示并查看错误。@AlokRajasukumaran您的浏览器控制台中有哪些错误消息？如果它以小提琴的方式工作，那么只要jQuery被加载，它就应该在其他地方工作。window.location.replace仅适用于相同来源的请求。和这与代码是否正常工作无关，只是出于一致性原因。问题可能是js没有加载到我的html中。我都搞不清楚它应该装在哪里。给了我一个身体负荷，但在身体负荷后它仍然不工作将其包装在$function{…}；中。由于JS将只在DOM就绪的情况下进行计算，因此您可以将其放置在任何位置，但是在jQuery之后，您可以给出完整的新代码集吗。作为js的新手，我对此感到困惑PIt在JSFIDLE中工作得非常完美。但不是在我的服务器上，请按JS提示并查看错误。@AlokRajasukumaran您的浏览器控制台中有哪些错误消息？如果它以小提琴的方式工作，那么只要jQuery被加载，它就应该在其他地方工作。window.location.replace仅适用于相同来源的请求。和这与代码是否正常工作无关，只是出于一致性原因。问题可能是js没有加载到我的html中。我都搞不清楚它应该装在哪里。给了我一个身体负荷，但在身体负荷后它仍然不工作将其包装在$function{…}；中。由于JS将只在DOM就绪的情况下进行计算，因此您可以将其放置在任何位置，但是在jQuery之后，您可以给出完整的新代码集吗。作为js的新手，我对此感到困惑P