動畫滑動div反彈而不是平滑地出現/消失

Question

我的應用程序中有一個導航欄和一個子導航欄。 在子欄中，可以按下按鈕，我希望此按鈕打開一個新的子欄，隱藏原始欄。

新的子欄應從主欄后面滑動並隱藏第二個欄。

問題是：

1. 當第三個條形出現時，它會反彈而不是平滑
2. 當第三個柱子消失時，它就會消失，並且不會像我期望的那樣向后滑動

我嘗試使用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; } 

 <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

說實話..我知道為什么“反彈”。 您的黃色容器在最終位置（可見時）放置（ visibility:hidden ）。 當您開始動畫時，菜單首先轉到頂部（動畫的原點）然后向下。

要解決它，你大概可以定位黃色容器時，在黑色的菜單不可見，但恕我直言...您的HTML是相當混亂（我的意思不是任何罪行）作為容器內的地方span其中包含BUTTOM和它是紅色菜單中的孩子......而且改變一切可能會搞砸一切。

但是你的菜單效果很容易從頭開始，只有非常簡單的css，html和jquery。 這就是我如何做到這一點，以防它可以幫助您，如果您要更改您的代碼。

使用此html（設置元素的順序以避免使用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>

這個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;}

而這個jquery（在點擊buttoms時添加或刪除一個類）：

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

你可能有什么類似於你正在尋找的東西。 希望這無論如何都有幫助。

小提琴

Answer 2

嘗試這個：

.myhidden{ top:-2000px; }

Answer 3

只需從div元素中刪除第三個和第三個類，它將停止彈跳效果。

<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>