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

Question

我制作了一个由两个buttons控制的动画，用于垂直移动div，
使用jquery 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/