Animated sliding div bounces instead of appear/disappear smoothly

Question

I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar.

The new sub bar should slide from behind the main bar and hide the second bar.

Problem is:

1. When the third bar appears it bounces instead of appear smoothly
2. When the third bar disappears it just disappears and doesn't slide back up as I would expect

I tried playing with the top property thinking it might solve the issue, but it hasn't.

I'm attaching here the snippet. Or you can view it in 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="BarController">
        <div class="navbar-deploy navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="col-lg-2">First Toolbar</div>
            </div>
        </div>
        <div class="sub-bar">
            <div class="sub-navbar-fixed" ng-cloak>
                <div class="container-fluid">
                    <span>
                        <a ng-click="click()"><span> Second Toolbar</span>
                        </a>
                        <div class="actions-bar third third-in third-out" ng-cloak ng-class="{'myhidden': !showActionsBar}">
                            <div class="container-fluid form-group"> <span class="col-lg-10">
                            <div class="col-lg-2 col-lg-offset-1">
                                    <a ng-click="cancelAction()">Back</a>
                            </div>
                    </span>

                        </div>
                    </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Try this:

.myhidden{ top:-2000px; }

Answer 2

To be honest.. I know why the "bounce". Your yellow container is placed (with visibility:hidden) at the final position (when visible). When you start your animation the menu first go to top (origin of the animation) and then down.

To fix it you may probably position the yellow container when not visible under the black menu but... Imho your html is quite a mess (I don't mean any offense) as your container is place inside an span which contains the buttom and it's a children of the red menu... and that changing all that may mess up everything.

But your menu effect is easy to do it from scratch with nothing but very simple css, html and jquery. This is how I would do it in case it may help you if you are up to change your code.

With this html (the order of the elements are set to avoid the use of z-index)

<div class="header">
    <div class="header-bot">
        <span class="show">second toolbar</span>
    </div>
    <div class="header-extra">
        <span class="hide">back</span>   
    </div>
    <div class="header-top">
        <span>first toolbar</span>
    </div>
</div>

this css:

body {margin:0;padding:0;}
span {color:#fff;}
.header {
    width:100%;
    position:fixed;
    top:0;
}
.header-top {
    background-color:black;
    height:50px;
    position:absolute;
    top:0px;
    width:100%;
}
.header-bot {
    background-color:red;
    height:50px;
    position:absolute;
    top:50px;
    width:100%;
}
.header-extra {
    background-color:yellow;
    height:50px;
    position:absolute;
    top:0;
    width:100%;
    transition: all 0.3s ease;
}
.down {
    top:50px;
}
.hide {color:#000;}

and just this jquery (to add or remove a class when click on the buttoms):

$(document).ready(function () {
            $('.show').click(function () {
                $('.header-extra').addClass("down"); 
            });
            $('.hide').click(function () {
                $('.header-extra').removeClass("down"); 
            });
        });  

You may have something simillar to what you are looking for. Hope this can help anyway.

FIDDLE