在Firefox和Opera中，transition: top不起作用

Question

我就是无法让这个工作起来。我非常确定这是可能的。

这只是一个例子。我希望内部的div能够通过过渡效果向下移动。

<div id="outer">
    <div id="inner"></div>
</div>

<style type="text/css">       
    #outer
    {
        width:200px; 
        height:200px; 
        background-color:Yellow;
    }

    #inner
    {
        position:relative;
        -webkit-transition: top .4s ease-out;
        -moz-transition: top .4s ease-out;
        width:50px; 
        height: 100px; 
        background-color:Red;
    }

    #inner:hover
    {
        top:20px;
    }

</style>

这段代码在Chrome中运行良好，但在Firefox 14和Opera 12中（带有相应的-o-transition）无法正常工作。我尝试了单独使用"transition"属性，但没有效果。

- AGuyCalledGerald

---

请记住 transition 的 -o- 和无前缀版本。 - Rich Bradshaw

Answer 1

你不能从auto过渡到20px。在#inner {}中将其明确设置为0px。

- Prinzhorn

---

@Prinzhom，虽然很小，但仍然是非常有价值的知识。 - Nik Sumeiko