html - 如何为条形图剪辑路径设置动画?
问题描述
我有一个在条形图上使用渐变背景的条形图。渐变高度是恒定的,我使用剪辑路径仅显示栏的一部分。这样,最暗的部分始终处于 100% 的高度。
我遇到的问题是将每个条从 0px 高度动画到其给定高度。
首先,我尝试使用动画、过渡和变换为剪辑路径设置动画。但没有运气。然后我尝试使用动画为栏本身设置动画 - 它有点工作。只是,它是自上而下而不是自下而上。在这里看我的小提琴。
我怎样才能让酒吧从底部展开?
.barChart { clear: both; height: 70px; width: 170px; border-bottom: solid 2px #eee; }
.bar {
float: left;
margin: 4px;
width: 6px;
background: linear-gradient(to top, #8BC2CA 0%, #2E92A0 100%);
animation: expandBar 2s ease;
animation-fill-mode: forwards;
}
.bar1 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar2 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar3 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar4 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar5 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar6 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar7 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar8 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar9 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
@keyframes expandBar{
0% {
height: 0;
}
100%{
height: 60px;
}
}
<div class="barChart">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
</div>
解决方案
而不是clip-path
您可以考虑元素的高度和渐变的固定大小。然后,您可以轻松地为该高度设置动画。
动画的技巧是制作元素inline-block
(而不是浮动)并隐藏一个(使用伪元素设置),height:100%
以便在底部定义基线,使您的元素从底部而不是顶部进行动画处理。
.barChart {
height: 70px;
width: 170px;
border-bottom: solid 2px #eee;
}
.barChart:before {
content:"";
display:inline-block;
height:100%;
}
.bar {
display:inline-block;
margin: 4px;
width: 6px;
background: linear-gradient(to top, #8BC2CA 0, #2E92A0 70px); /*same as height:100%*/
animation: expandBar 2s ease;
}
.bar1 {height: 80%;}
.bar2 {height: 20%;}
.bar3 {height: 60%;}
.bar4 {height: 70%;}
.bar5 {height: 50%;}
@keyframes expandBar {
0% {
height: 0%;
}
}
<div class="barChart">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
</div>
如果您有兴趣,您可以只使用一个元素和多个背景来执行此操作:
.barChart {
height: 70px;
width: 170px;
border-bottom: solid 2px #eee;
--grad:linear-gradient(to top, #8BC2CA 0, #2E92A0 70px);
background-image:var(--grad), var(--grad), var(--grad), var(--grad), var(--grad);
background-size:6px 60%,6px 80%,6px 20%,6px 70%,6px 50%;
background-position:4px 100%, 14px 100%, 26px 100%, 38px 100%,48px 100%;
background-repeat:no-repeat;
animation: expandBar 2s ease;
}
@keyframes expandBar {
0% {
background-size: 6px 0%;
}
}
<div class="barChart">
</div>
推荐阅读
- html - Objective-C 中的 HTML 字符串
- javascript - React - 然后无法在 Promise 中设置状态
- sql - 查找软件工程中表现最好的人的姓名、部门名称和分数
- c++ - 替换弃用的 QtSignalMapper 类以在 Qt5 中转发信号
- python - 不通过命令行将变量分配给 argparse
- android - 如何读取多行的 .txt 文件?
- reactjs - 当高度/宽度值是 React 道具时,如何设置 SVG 用户单位?
- haskell - Control.Exception.evaluate 对等效函数生成的 thunk 的处理方式不同
- mysql - 插入查询是否可以使用自动增量与字符串连接以获取列值?
- sas - 扩展 X 轴区域以减少观察中的杂波