javascript – 动画滑动div反弹而不是顺利出现/消失

我的应用程序中有一个导航栏和一个子导航栏.在子栏中,可以按下按钮,我希望此按钮打开一个新的子栏,隐藏原始栏.

新的子栏应从主栏后面滑动并隐藏第二个栏.

问题是：

>当第三个条出现时,它反弹而不是平滑
>当第三个柱子消失时,它就会消失,并且不会像我预期的那样向后滑动

我尝试使用top属性认为它可以解决问题,但事实并非如此.

我在这里附上片段.或者你可以在jsfiddle查看它

angular.module('myapp.controllers',[]);

var app = angular.module('myapp',['myapp.controllers','ngAnimate',]);

angular.module('myapp.controllers').controller("BarController",function ($scope) {
    $scope.showActionsBar = false;

    $scope.cancelAction = function () {
        $scope.showActionsBar = false;
    }

    $scope.click = function () {
        $scope.showActionsBar = true;
    }
});

.navbar-deploy {
    background-color: red;
    border: solid transparent;
}

.third,.sub-navbar-fixed {
    background-color: black;
    width: 100%;
    height:60px;
    padding-top: 18px;
    margin-bottom: 0px;
    z-index: 1000;
    color: white;
}

.actions-bar {
    top: 40px;
    background-color: yellow;
    position: fixed;
    padding-left: 0px;
    z-index: 1001;
}

.sub-bar {
    padding-top: 40px;
}

.third-in,.third-out {
    -webkit-transition:all ease-out 0.3s;
    -moz-transition:all ease-out 0.3s;
    -ms-transition:all ease-out 0.3s;
    -o-transition:all ease-out 0.3s;
    transition:all ease-out 0.3s;
    -webkit-backface-visibility: hidden;
}

.third-in.myhidden-remove,.third-out.myhidden-add.myhidden-add-active {
    display: block !important;
    top: -2000px;
    z-index: 0;
}

.third-out.myhidden-add,.third-in.myhidden-remove.myhidden-remove-active {
    display: block !important;
    top: -80px;
    z-index: 1001;
}

.myhidden {
    visibility: hidden;
}