Question

我通过添加/删除类来更改容器的垂直位置，这些类定义元素的verticle-align。到目前为止一切正常。我想动画这个元素的运动。这可能吗？如果是的话，CSS动画会有可能吗？

的jsfiddle：

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：

transition-duration:1s; -webkit-transition-duration:1s;

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

没有设置转换的方式是：

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

Answer 2

您可以使用CSS3动画：见下面的例子：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

也可以使用JavaScript。

Answer 3

它不会作为动画工作，它只会将位置改为顶部

Demo

.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 {
    height:300px;
    display: table-cell;
    float: none
    animation: Animate 4s;
    -webkit-animation: Animate 4s;
}

@keyframes example 
{
    from {vertical-align: middle;}
    to {vertical-align: top;}
}
-webkit-@keyframes example 
{
    from {vertical-align: middle;}
    to {vertical-align: top;}
}

位置动画通过＆＃39; vertical-align＆＃39;更改

3 个答案: