CSS动画不起作用改变最高值 [英] CSS animation doesn't work changing top value

问题描述

通过这个jQuery我改变窗体的垂直位置，但我有TA与动画的问题：我想动画位置的变化，使用户可以看到输入框移动到新位置。为什么没有动画工作？

http://jsfiddle.net/p6m97gwb/

如果有可能，我想用animate.css

HTML

 ＆LT; D​​IV ID =searchMainWrapper＆GT;
    ＆LT; D​​IV ID =searchMain级=垂直对齐，中间的＆GT;
        ＆LT;形式为GT;
            ＆LT;输入类型=文本＆GT;
        ＆LT; /表及GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS

  #searchMainWrapper {
    -webkit-动画：动画3秒。 / * Safari和Chrome * /
       -moz-动画：动画3秒。 / * *火狐/
            动画：动画3秒。
    -webkit-变换式：preserve-3D;
       -moz-变换式：preserve-3D;
            变换式：preserve-3D;    位置：绝对的;
    宽度：100％;
    身高：100％
}.vertical对齐，中间{
    位置：相对;
    顶部：50％;
    变换：translateY（-50％）;
}
.vertical对齐顶{
    位置：相对;
    顶：0像素;
}
 

JS

  $（'＃searchMain'）removeClass移除（'垂直对齐，中间'）addClass（垂直对齐顶'）。
 

解决方案

使用转换而不是动画

演示 的

  #searchMain {
    位置：绝对的;
    过渡：3秒;
}
.vertical对齐，中间{
    顶部：50％;
}
.vertical对齐顶{
    顶：0像素;
}
 

With this JQuery I change the vertical position of the form, but I have ta problem with the animation: I would like to animate the change of the position, so the user can see the input field moving to the new position. Why doesn't the animation work?

http://jsfiddle.net/p6m97gwb/

If it is possible, I would like to use 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');

解决方案

Use transition instead of animate

demo

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

这篇关于CSS动画不起作用改变最高值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！