小贝子编程

CSS 动画无法更改顶部值



使用这个JQuery，我改变了表单的垂直位置，但是我在动画方面有一个问题:我想用动画来改变位置，这样用户就可以看到输入字段移动到新的位置。为什么动画不工作?

http://jsfiddle.net/p6m97gwb/

如果可能的话，我想使用animation .css

<div id="searchMainWrapper">
    <div id="searchMain" class="vertical-align-middle">
        <form>
            <input type="text">
        </form>
    </div>
</div>
CSS

#searchMainWrapper {
    -webkit-animation: animate 3s; /* Safari and Chrome */
       -moz-animation: animate 3s; /* Firefox */
            animation: animate 3s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%
}
.vertical-align-middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.vertical-align-top {
    position: relative;
    top: 0px;
}

JS 

$('#searchMain').removeClass('vertical-align-middle').addClass('vertical-align-top');

用transition代替animate

演示

#searchMain{
    position:absolute;
    transition: 3s;
}
.vertical-align-middle {
    top: 50%;
}
.vertical-align-top {
    top: 0px;
}

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium