header.php: CSS 入场动画(fadeIn + translateY) footer.php: JS 拦截链接点击,先淡出再跳转 - 入场: 0.35s 从下方8px渐显 - 离场: 0.25s 向上8px渐隐 - 跳过: 锚点/javascript:/新窗口/修饰键
This commit is contained in:
@@ -6,6 +6,23 @@
|
|||||||
<script src="/{$template_catalog}/template/{$themes}/components/coinActive/coinActive.js"></script>
|
<script src="/{$template_catalog}/template/{$themes}/components/coinActive/coinActive.js"></script>
|
||||||
<script src="/{$template_catalog}/template/{$public_themes}/components/asideMenu/asideMenu.js"></script>
|
<script src="/{$template_catalog}/template/{$public_themes}/components/asideMenu/asideMenu.js"></script>
|
||||||
<script src="/{$template_catalog}/template/{$public_themes}/components/topMenu/topMenu.js"></script>
|
<script src="/{$template_catalog}/template/{$public_themes}/components/topMenu/topMenu.js"></script>
|
||||||
|
|
||||||
|
<!-- 页面过渡动画 -->
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
var link = e.target.closest('a[href]');
|
||||||
|
if (!link) return;
|
||||||
|
var href = link.getAttribute('href');
|
||||||
|
// 跳过:锚点、javascript:、新窗口、带修饰键
|
||||||
|
if (!href || href.startsWith('#') || href.startsWith('javascript') ||
|
||||||
|
link.target === '_blank' || e.ctrlKey || e.metaKey || e.shiftKey) return;
|
||||||
|
e.preventDefault();
|
||||||
|
document.body.classList.add('page-leaving');
|
||||||
|
setTimeout(function() { window.location.href = href; }, 250);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -17,6 +17,24 @@
|
|||||||
<!-- 模板样式 -->
|
<!-- 模板样式 -->
|
||||||
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/reset.css">
|
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/reset.css">
|
||||||
|
|
||||||
|
<!-- 页面过渡动画 -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
animation: pageEnter 0.35s ease both;
|
||||||
|
}
|
||||||
|
body.page-leaving {
|
||||||
|
animation: pageLeave 0.25s ease both;
|
||||||
|
}
|
||||||
|
@keyframes pageEnter {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes pageLeave {
|
||||||
|
from { opacity: 1; transform: translateY(0); }
|
||||||
|
to { opacity: 0; transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script src="/{$template_catalog}/template/{$themes}/theme/index.js"></script>
|
<script src="/{$template_catalog}/template/{$themes}/theme/index.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/common.css">
|
<link rel="stylesheet" href="/{$template_catalog}/template/{$public_themes}/css/common/common.css">
|
||||||
|
|||||||
Reference in New Issue
Block a user