我有一个 HTML & CSS 进度条。我现在需要的是它应该在完成时加载一个页面。无论如何？

Question

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

.text-center {
    text-align: center;
}

.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.progress {
    background-color: #e5e9eb;
    height: 0.25em;
    position: relative;
    width: 24em;
}
.progress-bar {
    -webkit-animation-duration: 3s;
    -webkit-animation-name: width;
    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    background-size: 24em 0.25em;
    height: 100%;
    position: relative;
}
.progress-shadow {
    background-image: linear-gradient(to bottom, #eaecee, transparent);
    height: 4em;
    position: absolute;
    top: 100%;
    transform: skew(45deg);
    transform-origin: 0 0;
    width: 100%;
}

/* ANIMATIONS */
@keyframes width {
       0%, 100% {
       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
       width: 0;
  }
   100% {
      width: 100%;
  }
}
@-webkit-keyframes width {
       0%, 100% {
       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
       width: 0;
  }
   100% {
      width: 100%;
  }
}

  <div class="container">
  <h2 class="text-center">Loading</h2>
  <div class="progress">
    <div class="progress-bar">
      <div class="progress-shadow"></div>
      </div>
  </div>
</div>

帮帮我！！我这里没有任何 java 脚本。如果我能在没有 java 脚本的情况下做到这一点，我会更高兴。所以请帮我解决这个问题。

更新 发现java脚本动画结束可能有帮助。

Answer 1

只需使用this trick highlighted by David Walsh。他为 transitionend 做到了，但我们可以将其换成 animationend。

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

当 animationend 事件被触发时，我们只需使用 window.location.replace()、as mentioned before.

重定向到感兴趣的 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');
    });
});

请在此处查看 fiddle：http://jsfiddle.net/teddyrised/9w7pntmt/3/

Answer 2

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

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];
    }
  }
}

function oload() {
    var animationEvent = whichAnimationEvent(),
      progress = document.getElementsByClassName('progress-bar')[0];

    animationEvent && progress.addEventListener(animationEvent, function() {
      window.location.replace("http://alokraj68.in");
    });
  }
  // Listen for animation

html,
body {
  height: 100%;
}
body {
  background-color: #f5f7f9;
  color: #6c6c6c;
  font: 300 1em/1.5em"Helvetica Neue", sans-serif;
  margin: 0;
  position: relative;
}
h1 {
  font-size: 2.25em;
  font-weight: 100;
  line-height: 1.2em;
  margin: 0 0 1.5em;
}
.text-center {
  text-align: center;
}
.container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.progress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 24em;
}
.progress-bar {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: width;
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}
.progress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  width: 100%;
}
/* ANIMATIONS */

@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

<html>

<head>
  <meta charset="UTF-8">
  <title>alokraj68.in--Loading!!</title>
  <link rel="stylesheet" href="css/loading.css">
  <script src="js/script.js"></script>
</head>

<body onload="oload()">
  <div class="container">
    <h1 class="text-center">alokraj68.in</h1>
    <h2 class="text-center">Loading</h2>
    <div class="progress">
      <div id="pb" class="progress-bar">
        <div class="progress-shadow"></div>
      </div>
    </div>
  </div>
</body>

</html>

试试这个编码。如果有人发现任何问题，请告诉我。

我有一个 HTML & CSS 进度条。我现在需要的是它应该在完成时加载一个页面。无论如何？

I got a HTML & CSS progress bar. what i need now is that it should load a page on complete. any ways?

html

css

onload

progress