css过渡 - 动画在开始时无法正常工作

Question

我 使用jquery 制作了一个由两个控制的动画buttons来垂直移动a div,但问题是动画在开始时无法正常工作.
click

CSS

.black-div {
    width: 100%;
    height: 120px;
    background-color: black;
    position: absolute;
    transition: top 1s 0s cubic-bezier(0, 0, 1, 1);
}

JS

$(".button-up").click(function(){
        $(".black-div").css({"top":"0px"});
});

$(".button-down").click(function(){
        $(".black-div").css({"top":"300px"});
});

见:http://jsfiddle.net/B6t2D/

Answer 1

您没有提供转换的初始状态.将其添加到CSS .black-div选择器中......

top: 0;

小提琴 - http://jsfiddle.net/B6t2D/3/