javascript - 通过 'vertical-align' 变化的位置动画

Question

我通过添加/删除定义元素垂直对齐的类来更改容器的垂直位置。到目前为止一切正常。我想为元素的这种运动制作动画。这可能吗？如果是，这是否可以通过 CSS 动画实现？

JSFiddle:

http://jsfiddle.net/j1wxc6a1/1/

HTML

<div id="main">
    <div id="wrapper" class="col-middle">
        <div class="container">
            <div id="content" class="top-margin">
                <input type="text">
            </div>
        </div>
    </div>
</div>

CSS

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.top {
  margin-top: 100px;
}

#main {
    display: table;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    height: 100% !important;
}
#wrapper {
    display: table-cell;
    float: none;
}

JS

$('#wrapper').removeClass('col-middle').addClass('col-top');
$('#content').addClass('top');

Answer 1

将此 css 属性添加到 #wrapper:

过渡持续时间:1s； -webkit-transition-duration:1s;

您将从所有样式属性更改中获得 1 秒的动画。
添加额外的 transition-property: vertical-align; 以仅在 vertical-align 更改时播放动画。

不设置transition的方式是:

$('#wrapper').animation({'vertical-align': 'top'}, 1000);