如何解决圆形导航菜单选择器没有显示选择点
我想在我的应用中实现这个动画，但它无法正常工作。 小圆圈根本没有出现，尽管它与我在下面发布的示例代码相同。
提前感谢您的帮助！
示例：https://www.uplabs.com/posts/circular-navigation-menu-selector
这是我得到的：
这是我的代码：
CSS：
$bg: #F0EDFD;
$main: #7B49DD;
$white: #FFFFFF;
/* Reset */
*,*::after,*::before {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
/* Generic */
.locomenu {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
font-family: 'Poppins',sans-serif;
font-size: 11px;
letter-spacing: 1px;
background: $bg;
user-select: none;
}
/**/
$color_primary: #c644fc;
$color_secondary: #f7f7f7;
$color_background: #000;
$point_count: 7;
$point_radius: 16px;
$circle_radius: 160px;
$start_anim_delta: 5;
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
Box-sizing: border-Box;
font-family: "Poppins",sans-serif;
}
html,body {
height: 100vh;
width: 100vw;
background-color: $color_background;
background: linear-gradient(#1f1f21,$color_background);
}
.main {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navigation-circle {
display: block;
position: relative;
height: $circle_radius * 2;
width: $circle_radius * 2;
margin: auto;
&__inner {
display: block;
position: relative;
height: 100%;
width: 100%;
}
&__list {
display: block;
position: absolute;
height: $circle_radius * 2;
width: $circle_radius * 2;
transform: rotate(-90deg);
animation: #{1 + (($point_count / $start_anim_delta) - 1 / $start_anim_delta)}s cubic-bezier(0.25,-0.25,0.35,1) 0 1 animate-in-list forwards;
}
}
.navigation-circle-svg {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotateZ(-90deg);
&--opaque {
opacity: 0.5;
}
&--mask {
circle {
transition: all 0.5s ease;
transition-delay: 0.5s;
animation: #{1 +(($point_count / $start_anim_delta) - 1 / $start_anim_delta)}s ease 0 1 animate-in-svg-circle-mask backwards;
}
}
}
.navigation-circle-list-item {
display: block;
position: absolute;
height: 0;
width: calc(50% + #{$point_radius});
top: 50%;
left: 50%;
list-style: none;
transform-origin: 0 0;
&__point {
display: block;
position: absolute;
height: $point_radius * 2;
width: $point_radius * 2;
top: -#{$point_radius};
right: 2px;
cursor: pointer;
transform: scale(0);
&:before {
content: "•";
display: block;
position: absolute;
height: $point_radius * 2;
width: $point_radius * 2;
top: 0;
color: $color_primary;
background-color: $color_background;
font-size: 12px;
font-weight: 400;
line-height: $point_radius * 2;
text-align: center;
border: 2px solid $color_primary;
border-radius: 50%;
Box-shadow: inset 0px 0px 0px 0px $color_primary;
transform: scale(0.75);
transition: all 0.5s ease;
}
&:after {
content: "";
display: block;
position: absolute;
height: 1px;
width: 0px;
top: 18px;
left: 31px;
background-color: $color_primary;
transition: all 0.5s ease;
}
}
&__Meta {
display: block;
position: absolute;
overflow: hidden;
opacity: 0;
transform-origin: center;
margin-left: 78px;
min-width: 68px;
padding: 4px;
}
&__title {
display: block;
color: $color_secondary;
text-align: left;
font-size: 10px;
border-bottom: 1px solid $color_secondary;
padding-bottom: 4px;
margin-bottom: 6px;
}
&__subtitle {
display: block;
color: $color_secondary;
text-align: center;
font-weight: 200;
font-size: 8px;
}
}
@for $i from 1 through $point_count {
.navigation-circle-list-item:nth-of-type(#{$i}) {
transform: rotateZ(calc((360deg / #{$point_count}) * #{$i}));
}
.navigation-circle-list-item:nth-of-type(#{$i}) .navigation-circle-list-item__Meta {
$angle: 360deg / $point_count * $i;
$rotateZ: 90 - $angle;
transform: rotateZ(#{$rotateZ});
}
.navigation-circle-list-item:nth-of-type(#{$i}) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55,-0.3,0.6,1.5) #{$i / $start_anim_delta - 1 /
$start_anim_delta
}
s 1 animate-in-list-item-point forwards;
}
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:before {
transform: scale(1);
font-size: $point_radius;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:after {
width: $point_radius * 2;
left: $point_radius * 2 + 2;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__Meta {
opacity: 1;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:before,.navigation-circle-list-item.active .navigation-circle-list-item__point:before {
transform: scale(0.85);
color: $color_background;
Box-shadow: inset 0px 0px 0px $point_radius $color_primary;
border-color: transparent;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:after,.navigation-circle-list-item.active .navigation-circle-list-item__point:after {
width: $point_radius * 2 + 2;
left: $point_radius * 2;
}
.navigation-circle-list-item:active .navigation-circle-list-item__Meta,.navigation-circle-list-item.active .navigation-circle-list-item__Meta {
opacity: 1;
}
@-webkit-keyframes animate-in-list {
0% {
transform: rotate(-540deg);
}
100% {
transform: rotate(-90deg);
}
}
@-webkit-keyframes animate-in-svg-circle-mask {
0% {
stroke-dashoffset: 1005;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes animate-in-list-item-point {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
HTML：
<div class="main">
<div class="navigation-circle">
<div class="navigation-circle__inner">
<svg class="navigation-circle-svg navigation-circle-svg--opaque" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 320 320" style="enable-background:new 0 0 320 320">
<circle cx="160" cy="160" r="158" fill="none" stroke-width="1" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dashoffset:0;stroke-dasharray:none;"></circle>
</svg>
<svg class="navigation-circle-svg navigation-circle-svg--mask" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 320 320" style="enable-background:new 0 0 320 320">
<circle id="mask-circle" cx="160" cy="160" r="158" fill="none" stroke-width="2" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dasharray:1005.3088px;"></circle>
</svg>
<ul class="navigation-circle__list">
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(1)" onmouseenter="calculateOffset(1)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #1
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(2)" onmouseenter="calculateOffset(2)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #2
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(3)" onmouseenter="calculateOffset(3)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #3
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(4)" onmouseenter="calculateOffset(4)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #4
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(5)" onmouseenter="calculateOffset(5)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #5
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(6)" onmouseenter="calculateOffset(6)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #6
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(7)" onmouseenter="calculateOffset(7)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__Meta">
<h3 class="navigation-circle-list-item__title">Item #7
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
</ul>
</div>
</div>
</div>
<script>
const pointCount = 7;
const circleRadius = 160;
const startAnimDelta = 5;
const circumference = Math.PI * circleRadius * 2;
var selectedItemIndex = -1;
var circlePath = document.getElementById('mask-circle');
/**
* @description On Mouse Leave event handler for points
*/
const onMouseLeave = () => {
let index = (selectedItemIndex !== -1) ? selectedItemIndex : 0;
calculateOffset(index);
};
/**
* @description On Click event handler for points
* @param {Number} index - Index of list item
*/
const onClick = (index) => {
//If already selected,deselect
selectedItemIndex = (selectedItemIndex === index) ? -1 : index;
calculateOffset(index);
//Find active item,deselect
let activeListItem = document.querySelectorAll('.navigation-circle-list-item.active');
if (activeListItem.length > 0) activeListItem[0].classList.remove('active');
//Find new item by index,select
let listItem = document.querySelectorAll('.navigation-circle-list-item:nth-of-type(' + selectedItemIndex + ')');
if (listItem.length > 0) listItem[0].classList.add('active');
};
/**
* @description - Calculate offset for circle path by index of list item
* @param {Number} index - Index of list item
*/
const calculateOffset = (index=0) => {
let offset = 0;
if (index !== 0) offset = (circumference / pointCount) * (pointCount - index);
circlePath.style.strokeDashoffset = `${offset}px`;
};
// INTRO
let buffer = 500;
let delay = 1000 * (1 + (pointCount / startAnimDelta) - (1 / startAnimDelta)) + buffer;
setTimeout(() => onClick(1),delay);
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
