通过'vertical-align'改变

Animation of position via 'vertical-align' change

本文关键字：改变 vertical-align 通过      更新时间：2023-09-26

我通过添加/删除类来改变容器的垂直位置，这些类定义了元素的垂直对齐。到目前为止，一切正常。我想把元素的运动做成动画。这可能吗?如果是的话，这在css动画中是否可行?

JSFiddle:

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

<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');

添加以下css属性到#wrapper:

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

和你将得到1秒动画从所有样式属性的变化。
添加额外的transition-property: vertical-align;，只在vertical-align改变时播放动画

不设置过渡的方式为:

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

它不能作为动画，它只会改变位置到顶部

演示
.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;}
}

你可以使用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

相关文章：