[英]Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?
我在演示主頁home.html上有一個circle類元素.circle和一個導航欄。 我需要單擊導航的元素之一href到resume.html）進行動畫處理（增大其尺寸），以使其大小與鏈接頁面上的類似元素.circleRe （resume.html）匹配， 然后才移至該頁面。 那么，如何在制作動畫時延遲加載第二頁？
PS圈子也對懸停做出了響應（並將其略微放大為文本）。
我嘗試使用JavaScript並取得了部分成功，但是href似乎取消了動畫效果。 @keyframes似乎不是正確的解決方案
nav { overflow: hidden; background-color: #333; position: fixed; z-index: 10 } nav a { font-family: DoubleBass; font-weight: normal; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } .circle { background: #D73309; opacity: 0.7; width: 37.5vmin; height: 37.5vmin; border-radius: 50%; margin: 0 auto; position: fixed; z-index: 1; top: -100px; right: -70px; -webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s; /* Safari */ transition: width 1.2s, height 1.2s, box-shadow 1.2s; } .quotes { opacity: 0; font-size: .9em; line-height: 120%; padding: 70px 0px 0px 20px; } .circle:hover { width: 60vmin; height: 60vmin; opacity: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .circle:hover .quotes { opacity: 1; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; } .circleRe { background: #D73309; opacity: 1; width: 140vmax; height: 140vmax; border-radius: 50%; margin: 0 auto; position: absolute; z-index: 1; top: -500px; right: -400px; }
<header> <nav> <a href="home.html">Home</a> <a href="resume.html">Resume</a> <a href="archive.html">Archive</a> <a href="films.html">Films</a> </nav> </header> <body> <div class="circle"> <p class="quotes"></p> </div> </body>
$('.links').click(function(e) { e.preventDefault(); //Show the UI Loader here $('.loaders').show(); setTimeout(function() { //Hide the UI Loader after 5 seconds $('.loaders').hide(); }, 5000); });
nav { overflow: hidden; background-color: #333; position: fixed; z-index: 10 } nav a { font-family: DoubleBass; font-weight: normal; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } .circle { background: #D73309; width: 37.5vmin; height: 37.5vmin; border-radius: 50%; margin: 0 auto; position: fixed; z-index: 100; top: -100px; right: -70px; -webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s; /* Safari */ transition: width 1.2s, height 1.2s, box-shadow 1.2s; } .quotes { opacity: 0; font-size: .9em; line-height: 120%; padding: 70px 0px 0px 20px; } .loaders { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0px; left: 0px; opacity: .5; /* in FireFox */ filter: alpha(opacity=50); /* in IE */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <nav> <a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a> <a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a> <a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a> <a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a> </nav> </header> <body> <div class="circle"> <p class="quotes"> </p> </div> <div class="loaders" style="display:none;"></div> </body>
注意：-在單擊時顯示加載器，一段時間后，您可以隱藏該加載器。 因此用戶將無法與DOM（UI）進行交互。
希望這可以幫助！
如何在使用時在導航欄上顯示真實的網址
[英]How to show real url on the navigation bar when using <a href=“#” onclick=“funtion('test.php')”>
如何在錨標記 ( <a>) 中</a>同時執行 onClick 和 href
[英]How to execute onClick and href both in an anchor tag (<a>)
HTML：如何使頁面保留在“ href”頁面上，並為“ onclick”打開新頁面
[英]HTML: How to make page keep on the “href” page, and open a new page for “onclick”
在一個<div>元素如何優先處理 href 和 onClick 調用？
[英]On a <div> element how to prioritize the href and onClick calls?
如何在 React 和新頁面中鏈接 2 個組件仍然有導航欄
[英]How to link 2 components in React and in a new page still have a navigation bar
如何用圓圈和onclick()函數改變頁面中圓圈的背景顏色？
[英]How can change the background color of a circle in the page with a circle and the onclick() function?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.