[英]CSS3 page loading effect trigger by jquery
嗨,朋友們,我正在嘗試制作將由jquery觸發的CSS3動畫。 即,當用戶提交某種形式時,我需要在一段時間內顯示動畫(css3)並將其重定向到下一頁。
CSS3動畫:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
這是html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
現在,當我單擊用戶時,我需要在短時間內顯示此效果(例如,警告框之類的意思是,當播放此動畫時,用戶不應在頁面的其余部分中執行任何操作)
通常,您可以通過用元素(“覆蓋”)覆蓋頁面來使其無法訪問。
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
要在用戶單擊“提交”按鈕時將其激活,默認情況下只需將其“隱藏”即可。 當用戶單擊按鈕時,使其“可見”。 最基本的形式:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
和額外需要的CSS :
.loadingOverlay {
/* ... */
display: none;
}
在下面提供的示例中,您將看不到動畫。 下一頁為空白,加載速度太快。 但是您會在“真實”網站上看到它。
這是實時示例: http : //jsfiddle.net/9H7wf/2/
編輯:
Max Boll建議在“新”頁面上發生“加載效果”。 這說得通。 但是,當獲取新頁面時,“舊”頁面仍然可見,直到發生一些關鍵的“ http”事件為止。 參見http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
因此,將其放在“舊”頁面上確實很有意義。
我建議您為此使用jQuery。
默認情況下,您可以將動畫顯示為疊加層(如JOPLOmacedo所述)。
然后,將以下內容添加到您的javascript中:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
只要網站需要加載,就會顯示加載疊加層(您實際上想通過該加載動畫來顯示)。 頁面加載后,此javascript將使其淡出。
我的解決方案基於JOPLOmacedo的答案。
編輯我剛剛看到了您的新評論。 要在單擊按鈕時顯示它,您可以這樣操作:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
在點擊事件功能內部,您可以啟動間隔以在X秒后再次淡出。
嗨,朋友,我找到了這個Thanx @JOPLOmacedo的解決方案,幫助我修復了這個問題
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.