Question

我想在加载我的网站时显示一个不断增长的专栏：

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的属性中？但这不起作用，对吗？

我猜也可以使用关键帧动画。但是，实际上我的列数多于一列，所有列都应该增长到不同的高度。因此，我必须为每个列创建一个关键帧动画，我相信这有点混乱。

有谁知道我问题的干净解决方案？提前谢谢......

Answer 1

这很有效。需要webkit for Chrome / Safair我相信。非常确定你不能从最小高度动画，因为最小高度不是高度。 CSS转换仅适用于设定值到设定值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

最好像下面的示例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;
}

在页面加载时增加DIV？

2 个答案: