CSS动画无法改变*值
问题描述:
有了这个JQuery我改变了表单的垂直位置,但我有动画的问题:我想动画位置的变化,所以用户可以看到输入栏移动到新的位置。为什么动画不工作?CSS动画无法改变*值
如果有可能,我想用animate.css
HTML
<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;
}