Javascript 页面负载上的div在增长？

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

函数init（）{
document.getElementsByClassName（'col'）[0].style.height='50px'；
}

.col{
宽度：20px；
最小高度：1px；
过渡：高度0.5s，缓减0s；
背景色：红色；
}

---

这很有效。我相信Chrome/Safair需要webkit。非常确定，也不能从“最小高度”设置动画，因为“最小高度”不是高度。CSS转换只能从设置值转换到设置值

函数init（）{
var d=document.getElementsByClassName（'col'）[0]；
d、 className=d.className+“col animate”；
}

.col{
宽度：20px；
高度：1px；
过渡：所有0.5s缓解0；
-webkit过渡：所有0.5都减少0；
背景色：红色；
}
col动画{
高度：50px；
}

---

最好编写如下示例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;
}

---

你说它不起作用是什么意思。它使色谱柱50px高。你在期待什么？动画？动画包含在CSS中。您的高度设置包含在JS中。这两个人的互动不像你想的那样。制作第二个类

col animate

将该类的高度设置为50px，而不是使用JS设置高度，而是使用JS添加该类

col animate

。你能使用Jquery吗？我不能，Danko。我应该这么说的。事实上，这是我第一次尝试，但没有成功。然而，我刚刚意识到这种方法首先需要设置一个高度，这就是我现在添加的。所以一切都很顺利，非常感谢。：）我相信Mozilla现在支持没有-moz的转换，但我可能错了。此外，您的css中有一个输入错误。它应该是

-moz-tran…

和

-o-trans…

kit

是

-webkit-

@Leeish的一部分，感谢您的观察，一些旧版本的Mozilla可能需要“-moz-transition”