Как я могу анимировать клип-путь гистограммы? - PullRequest
Новая
       6

Как я могу анимировать клип-путь гистограммы?

1 голос
/ 06 марта 2019

У меня есть гистограмма, которая использует градиентный фон на столбцах.Высота градиента постоянна, и я использую путь обрезки, чтобы показать только часть полосы.Таким образом, самая темная часть всегда находится на высоте 100%.

Проблема, с которой я сталкиваюсь, состоит в том, чтобы анимировать каждый бар с высоты 0 пикселей до заданной высоты.

Сначала я попытался анимировать клиппуть с использованием анимации, перехода и преобразования.Но не повезло.Затем я попытался анимировать саму панель с помощью анимации - и это вроде как работает.Только это идет сверху вниз, а не снизу вверх. См. Мою скрипку здесь.

Как я могу заставить бары расширяться снизу? 

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

1 Ответ

3 голосов
/ 06 марта 2019

Вместо 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>
...