CSS过渡从下到上不起作用

Question

我在css下面用于我的侧边栏，transition有效，因为此侧边栏从左到右打开

CSS

.sidebar{
    position: absolute;
    width: 300px;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    height: 100%;
    z-index: 101;
    left: -310px;
    -webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

并且这里尝试使用相同的CSS代码从下至上transition，但下面的代码没有过渡效果。

.sidebarr{
    position: fixed;
    font-size: 15px;
    width: 100%;
    background-color: #FFF;
    height: 70%;
    z-index: 101;
    bottom: -100%;
    transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1);
}

.sidebarr.opened{
top: 30%
}

现在，当div从底部滑动到顶部时，我该如何设置动画。

Answer 1

替换

.sidebarr.opened{
top: 30%
}

with

.sidebarr.opened{
    bottom: 0
    }