转换:顶部不在Firefox和Opera中工作

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>

它工作得很好f.ex. 在Chrome中,但不是Firefox 14和Opera 12(具有相应的-o-transition).我尝试了唯一的"过渡"属性而没有效果.

Answer 1

你无法过渡auto到20px.明确地将它设置为0px在#inner {}.