让导航栏onclick / href在圆形元素上执行动画，然后加载新页面-如何？
[英]Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?
问题描述
I have a circle class element .circle and a navigation bar on a demo homepage home.html . 
我在演示主页home.html上有一个circle类元素.circle和一个导航栏。 I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. 我需要单击导航的元素之一href到resume.html）进行动画处理（增大其尺寸），以使其大小与链接页面上的类似元素.circleRe （resume.html）匹配， 然后才移至该页面。 So, how to delay loading the second page while doing the animation? 那么，如何在制作动画时延迟加载第二页？
PS The circle also response to hovering (and slightly enlarging it to have a text.) PS圈子也对悬停做出了响应（并将其略微放大为文本）。
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. 我尝试使用JavaScript并取得了部分成功，但是href似乎取消了动画效果。 @keyframes does not seem to be the right solution @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>
1 个解决方案
解决方案1
0 2019-10-16 13:08:27
$('.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>
Note:- Show loader on click and after some times, you can hide that loader. 注意：-在单击时显示加载器，一段时间后，您可以隐藏该加载器。 so the user will not be able to interact with DOM(UI). 因此用户将无法与DOM（UI）进行交互。
Hope this helps! 希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.