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:

When the third bar appears it bounces instead of appear smoothly
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>

score 2 · Answer 1 · answered Jun 03 '15 at 12:09

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

Thanks for the thorough answer. It explains a lot, but unfortunately, I can't integrate pure jQuery in the project as it's an Angular project and we avoid adding pure jQuery code. I've been trying to apply your comments on my Angular code but so far I can't get it right :/ — Avi, Jun 04 '15 at 08:03
Np. Glad You had an answer offering an easy solution. gl with your project — Alvaro Menéndez, Jun 04 '15 at 13:04

score 2 · Accepted Answer · answered Jun 04 '15 at 08:59

2

Try this:

.myhidden{ top:-2000px; }

answered Jun 04 '15 at 08:59

SirDemon

1,758
15
24

samyak bhalerao · Answer 3 · 2015-06-03T13:34:35.803

0

Just remove class third-in and third-out from div element it will stop bouncing effect.

<div class="actions-bar third " 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>

edited Jun 03 '15 at 13:34

answered Jun 03 '15 at 12:06

samyak bhalerao

307
2
10

But then there's no animation. Right? – Avi Jun 03 '15 at 12:14
Yes there will be slideup and slide down animation – samyak bhalerao Jun 03 '15 at 13:34
Unfortunately if I'm removing the third-in third-out, the animation affect is lost completely. – Avi Jun 04 '15 at 08:00

Animated sliding div bounces instead of appear/disappear smoothly

3 Answers3