Как я могу анимировать bar charts используя clip-path?

140

22 ноября 2019, 14:00

У меня есть bar chart, на элементах которого используется градиентный фон.

Высота градиента постоянна, и я применяю clip path, чтобы обрезать и показать только оставшуюся часть полосы.

Таким образом, самая темная часть всегда на высоте 100%
Проблема, состоит в том, чтобы анимировать каждый bar от 0px высоты до его заданной величины.

Сначала я попытался анимировать clip-path, используя анимацию, transition и transform. Но не получилось.

Затем я попытался анимировать сам bar - и это вроде как работает. Только это идет сверху вниз, а не снизу вверх. https://jsfiddle.net/ytvag42n/3/

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

.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) и иметь скрытую, (установленную с псевдоэлементом) высоту: 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>

Если вам интересно, вы можете сделать это только с одним элементом и multiple background:

.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%; 
  } 
}