Question

我有一个在条形图上使用渐变背景的条形图。渐变高度是恒定的，我使用剪切路径仅显示条形图的一部分。这样，最暗的部分始终处于100％的高度。

我遇到的问题是使每个条形从0px高度动画到其给定高度。

首先，我尝试使用动画，过渡和变换为剪辑路径设置动画。但是没有运气。然后，我尝试使用动画为酒吧本身制作动画-并完成了一些工作。只是，它是自上而下而不是自下而上。 See my fiddle here.

如何使条形从底部展开？

.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>

Answer 1

您可以考虑使用元素的高度和渐变的固定大小来代替clip-path。然后，您可以轻松地为该高度设置动画。

动画的窍门是制作元素inline-block（而不是float），并使其具有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>

如何为条形图剪辑路径设置动画？

1 个答案: