页面加载上不断增长的DIV

我想在加载我的网站时显示一个不断增长的列，如下所示：

function init() {
  document.getElementsByClassName('col')[0].style.height = '50px';
}

.col {
  width: 20px;
  min-height: 1px;
  transition: height 0.5s ease-out 0s;
  background-color: red;
}

<body onload="init()" >
  <div class="col" ></div>
</body>

但正如你所看到的，它不起作用。将onload属性放在div的属性中理论上会有帮助吗？但这不管用，对吧？

我想我也可以使用关键帧动画。然而，我实际上有不止一个专栏，所有的专栏都应该增长到不同的高度。因此，我必须为我的每一列创建一个关键帧动画，我认为这有点混乱。

有人知道解决我问题的干净办法吗？提前感谢。。。

这很有效。我相信需要Chrome/Safair的网络工具包。很确定你也不能从最小高度设置动画，因为最小高度不是高度。CSS转换只能从设置值转换到设置值。

function init() {
  var d = document.getElementsByClassName('col')[0];
  d.className = d.className + " col-animate";
}

.col {
  width: 20px;
  height: 1px;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  background-color: red;
}
.col-animate {
  height: 50px;
}

<body onload="init()" >
  <div class="col" ></div>
</body>

最好像下面的例子一样编写CSS，以支持更多可能的浏览器

.col {
 width: 20px;
 height: 1px;
 transition: all 0.5s ease-out 0s;
 -webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
 -o-transition: all 0.5s ease-out 0s;   // Opera
 -moz-transition: all 0.5s ease-out 0s; // Mozilla
 background-color: red;
}

相关内容

最新更新

热门标签：