为什么"top"属性不会对传输进行动画处理？

Question

我正在尝试获取它，以便当您将鼠标悬停在框上时，"^"将向上动画。目前，它在结束状态上到达正确的位置，但它不应用 css 传输。

js小提琴：http://jsfiddle.net/9f9fyaj2/

.HTML：

<a href="#">
    <div class="scrollToTop">
        <i>^</i>
    </div>
</a>

.CSS：

body{
    background: #7A7A7A;
}
.scrollToTop{
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
}
.scrollToTop i{
    position: absolute;
    top: 0px;
    -webkit-transition: top .02s ease-out;
    -moz-transition: top .02s ease-out;
    -ms-transition: top .02s ease-out;
    -o-transition: top .02s ease-out;
    transition: top .02s ease-out;
}
.scrollToTop:hover i{
    top:-20px;
}
.scrollToTop:hover{
    background: rgba(0,0,0,1);
}

Answer 1

您的过渡运行良好。只需增加为过渡提供的时间。

喜欢这个：

.scrollToTop i{
            position: absolute;
            top: 0px;
            -webkit-transition: top .5s ease-out;
            -moz-transition: top .5s ease-out;
            -ms-transition: top .5s ease-out;
            -o-transition: top .5s ease-out;
            transition: top .5s ease-out;
}