CSS动画——柱形图

柱形图——CSS动画

1.0 版

这个月在写官网的时，遇到柱形图。经理又要求，为了提升用户体验，在设计稿合适的地方，加入恰当的动效。行，开搞。

嗯？这是什么，这动效，不是我想要的，这是什么。
附上代码，看看，啥问题

// HTML
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="listX"><img src="./img/book-2.png" alt=""></div>

//样式
ul,li {
      list-style: none;
    }
ul{
  position: relative;
  box-sizing: border-box;
  padding-top: 225px;
  font-size: 0;
}
li{
  width: 38px;
  height: 0;
  position: absolute;
  bottom: -6px;
  animation: height 0.4s ease-out;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  text-align: center;
  background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
  box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
}
li:nth-child(1){
  left: 26px;
  height: 20px;
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  margin-left: 0;
}
 li:nth-child(2){
  left: 100px;
  height: 41px;
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
 li:nth-child(3){
  left: 175px;
  height: 70px;
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
 li:nth-child(4){
  left: 251px;
  height: 100px;
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
 li:nth-child(5){
  width: 37px;
  left: 325px;
  height: 129px;
  animation-delay: 1.0s;
  -webkit-animation-delay: 1.0s;
}
 li:nth-child(6){
  width: 37px;
  left: 400px;
  height: 149px;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  margin-right: 0;
}
@keyframes height {
  0%{
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
.listX{
  text-align: left;
}
.listX img{
  width: 477px;
}

2.0版

知识点：
visibility:hidden;
animation-fill-mode: forwards;
这才是我预想的动效。

修改后的代码：

li{
  width: 38px;
  height: 0;
  position: absolute;
  bottom: -6px;
  animation: height 0.4s ease-out;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  text-align: center;
  background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
  box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
  
  //增加的样式
  visibility: hidden;
  animation-fill-mode: forwards;
}

3.0版

在掘金上看到"作者JowayYoung写的爱情信号满格，知识点：BFC+CSS变量遍历+CSS变量组合计算+滤镜色相旋转+反向动画+Flexbox底部基线对齐"。
受作者JowayYoung的启发，优点：不用累赘写 li 的高度 + 动画的时间，于是我写了3.0版。

知识点：

--height: calc((var(--line-index) + 1) * 30px);
--time: calc(var(--line-index) * 300ms);
height: var(--height);
animation: height 0.4s ease-out var(--time);

知识点说明

css3 的过滤属性，var表示执行某个变量，--用在声明变量。
语法：--名字：值；
例如：--a：10px；就表示变量是a，值是10px

例子：

:root{
  --color:red;
}
p{
  --wid:100px;
  width:var(--wid);  //100px
  heith:var(--wid);  //100px
  border-radius:calc(var(--wid) / 2); //50px
  color:blue;
}
span{
  width:calc(var(--wid) / 5);  //20px
  display:inline-block;
  color:var(--color); //red
}

最终代码：

//HTML
<ul>
    <li style="--line-index: 0"></li>
    <li style="--line-index: 1"></li>
    <li style="--line-index: 2"></li>
    <li style="--line-index: 3"></li>
    <li style="--line-index: 4"></li>
    <li style="--line-index: 5"></li>
 </ul>
 <div class="listX"><img src="./img/book-2.png" alt=""></div>
 
 //样式
 ul,li {
     list-style: none;
}
ul{
  position: relative;
  box-sizing: border-box;
  padding-top: 225px;
  font-size: 0;
}
li{
  width: 38px;
  position: absolute;
  bottom: -6px;
  animation: height 0.4s ease-out;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  text-align: center;
  background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
  box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
  
  visibility: hidden;
  animation-fill-mode: forwards;
  
  //增加的样式
  --height: calc((var(--line-index) + 1) * 30px);
  --time: calc(var(--line-index) * 300ms);
  height: var(--height);
  animation: animate-height 0.4s ease-out var(--time);
}

//已修改的li，不用累赘写 li 的高度 + 动画的时间
li:nth-child(1){
  left: 26px;
}
 li:nth-child(2){
  left: 100px;
}
 li:nth-child(3){
  left: 175px;
}
 li:nth-child(4){
  left: 251px;
}
 li:nth-child(5){
  left: 325px;
}
 li:nth-child(6){
  left: 400px;
}
@keyframes height {
  0%{
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
.listX{
  text-align: left;
}
.listX img{
  width: 477px;
}

END

我是一枚正在前端踩坑的小白，这是我第一篇的掘金文章，把自己正在经历的坑，分享给大家，不知道对大家有没有用，只想当做笔记作为分享。