老師好，我想實(shí)現(xiàn)頁面的轉(zhuǎn)換更好看一點(diǎn)
以下是代碼，這里實(shí)現(xiàn)的是錨鏈接，我想就要一般的鏈接也有一個(gè)緩沖效果怎么做呢？今天剛剛看了一點(diǎn)您講的課，感覺蠻好的，就是這里我不知道怎么做，請(qǐng)快點(diǎn)回復(fù)我好嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="refresh"content="1;url=http://www.baidu.com"> -->
<title>頁面加載特效</title>
<link rel="stylesheet" type="text/css" href="page-load/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="page-load/css/demo.css" />
<link rel="stylesheet" type="text/css" href="page-load/css/component.css" />
<script src="page-load/js/snap.svg-min.js"></script>
<script src="page-load/js/classie.js"></script>
<script src="page-load/js/svgLoader.js"></script>
<script>
function init() {
var pageWrap = document.getElementById( 'pagewrap' ),
pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
currentPage = 0,
triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 500, easingIn : mina.easeinout } );
triggerLoading.forEach( function( trigger ) {
trigger.addEventListener( 'click', function( ev ) {
ev.preventDefault();
loader.show();
// after some time hide loader
setTimeout( function() {
loader.hide();
classie.removeClass( pages[ currentPage ], 'show' );
// update..
currentPage = currentPage ? 0 : 1;
classie.addClass( pages[ currentPage ], 'show' );
}, 2000 );
} );
} );
}
</script>
</head>
<body>
<div id="pagewrap">
<div class="container show" id="page-1">
<div>
<a href="#page-2"onclick="init()">點(diǎn)擊預(yù)覽效果</a>
</div>
</div>
<div id="page-2">
<section>
<h2>這是一個(gè)示例頁面.</h2>
<p><a href="#page-1">返回</a></p>
</section>
</div>
<div id="loader" data-opening="M 40,-65 145,80 -65,80 40,-65" data-closing="m 40,-65 0,0 L -65,80 40,-65">
<svg width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M 40,-65 145,80 40,-65"/>
</svg>
</div>
</div>
</body>
</html>
