html - 当容器 ul 可见时绘制 svg 线条
问题描述
我创建了一个受“站点地图”启发的菜单,它使用 svgs 连接菜单中的每个项目。目前svg是静态的。但是我相信有可能使这些吸引?
我有一个额外的复杂性,我只希望在它们的容器 ul 可见时绘制线条。
当父 li 悬停在上面时,这些当前可见...
#submenu-1 li:hover>ul {
visibility: visible;
opacity: 1;
max-height: 500px;
transition: opacity 0.5s ease-in;
}
这是小提琴的链接 https://jsfiddle.net/spittman/sn3xg5Lb/113/show
有任何想法吗?
谢谢山姆
解决方案
你被困在哪里了?关于如何在 SVG 中为线条绘制动画,有很多关于堆栈溢出的问题和答案。
在您的情况下,我建议您重新绘制每条线,以便它们都从顶部开始并在它们的叶点结束。目前,它们似乎被分成几部分,并朝着随机的方向前进。有些是从头到尾,有些是从头到尾)。
例如:
<svg viewBox="0 0 900 50">
<polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>
<polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>
<polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>
<polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>
</svg>
画线动画是通过设置astroke-dasharray
等于线的长度来完成的。然后你将动画stroke-dashoffset
从那个长度减到 0。网上有很多教程解释了它是如何工作的。我不会在这里重复细节。
#submenu-1 li ul svg polyline.st0 {
stroke-dasharray: 388px;
stroke-dashoffset: 388px;
}
然后在悬停时,我们将stroke-dashoffset
388 转换为 0。
#submenu-1 li:hover>ul svg polyline.st0 {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s ease-in;
}
您需要对每个树 SVG 重复上述步骤。对于较小的树形图,388px
需要减小该值。
完整示例:
$('#menu').mouseover(function () {
$('#page-title').hide();
});
$('#menu').mouseout(function () {
$('#page-title').show();
});
@import url("https://use.typekit.net/tud5kgo.css");
body {
margin: 0;
padding: 0;
border: 0;
background-color: black;
}
/* Main Menu*/
#submenu-1 {
list-style: none;
margin: 0;
padding: 0px 0 0 0;
}
/* Level 1 – List item */
#submenu-1 li {
width: 900px;
float: left;
text-align: center;
padding-top: 10px;
}
#submenu-1 li:hover>ul {
visibility: visible;
opacity: 1;
max-height: 500px;
transition: opacity 0.5s ease-in;
}
#submenu-1 li ul svg polyline.st0 {
stroke-dasharray: 388px;
stroke-dashoffset: 388px;
}
#submenu-1 li:hover>ul svg polyline.st0 {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s ease-in;
}
#submenu-1 ul {
list-style: none;
left: 0;
margin: 0;
padding: 0;
position: relative;
width: 900px;
float: left;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
max-height: 0;
transition: max-height 0.5s ease-out;
z-index: 600;
padding: 10px 0px 0px 0px;
}
a:link,
a:visited,
a:active {
color: white;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-family: "montserrat";
font-weight: 800;
font-size: 25px;
letter-spacing: 2px;
line-height: 1;
}
a:hover {
color: grey;
}
.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul id="submenu-1">
<li id="m"><a href="#">what brings<br>you here?</a>
<ul>
<svg viewBox="0 0 900 50">
<polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>
<polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>
<polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>
<polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>
</svg>
</ul>
</li>
</ul>
</div>
</div>
推荐阅读
- operating-system - 您会考虑将诸如 vi 之类的文本编辑器作为系统程序还是应用程序?证明合法。
- python - 装饰类方法的pythonic方式
- python-3.x - Python 矩阵乘法 - 追加到空列表中
- python - Tkinter 计算器:当您第一次输入或没有小数点时如何使 0 消失
- swift - 地理围栏功能 iOS 11
- c# - 如何使用复杂对象发出 GET 请求?
- c - 在c中读取文件
- php - Laravel 中的多态性?
- laravel - laravel 5.5 forge 任务调度 cron 作业
- python - Tensorflow:如何在新图中使用预训练的权重?