Ionic + AngularJs 自定义 css 过渡无效

Question

我目前正在编写 Ionic + AngularJS 应用程序。

在特定页面上，我想根据滑动显示/隐藏 div。我有这种行为，但正如您在下面的 gif 中看到的那样，当 div 从页面底部移动时出现问题。向上滑动时，div 移动到顶部，然后向下延伸。我正在寻找它以一个动作从底部移动。

我正在使用 ng-class

在 div 上设置 class

<div on-swipe-up="myvar='sideBar'" on-swipe-down="myvar=''" class="sideBarBase" ng-class="myvar">

我的 CSS 看起来像：

.sideBarBase {
    position:absolute;
    right:0;
    bottom:0;
    height: 15%;
    width: 40%;
    background-color: white;
    opacity: .9;
    padding: 25px;
    overflow: hidden;
    -webkit-transition: .6s;}

.sideBar {
    height: 100%;
    overflow: scroll;
    top:0;
}

Answer 1

我解决这个问题的方法不是在 top: 0 和 bottom: 0 之间改变我现在只是改变 height: 10% 和 height: 100% 之间的高度保持 bottom: 0

完整的 CSS 现在看起来像：

.sideBarBase {
    position:absolute;
    right:0;
    bottom:0;
    height: 10%;
    width: 40%;
    background-color: white;
    opacity: .9;
    padding: 25px;
    overflow: hidden;
    -webkit-transition: .6s;
}

.sideBar {
    height: 100%;
    overflow: scroll;
}

Ionic + AngularJs 自定义 css 过渡无效

Ionic + AngularJs custom css transition not working

html

css

angularjs

css-transitions

ionic