動畫滑動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

試試這個：

.myhidden{ top:-2000px; } 

Answer 2

查看它只是從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> 

Answer 3

說實話..我知道爲什麼「反彈」。將黃色容器放在最終位置（當可見時）（與visibility:hidden一起）。當你開始你的動畫時，菜單首先到達頂部（動畫的原點）然後向下。

要解決這個問題，你可能需要在黑色菜單下看不到黃色容器，但是...... Imho你的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"); 
      }); 
     }); 

你可能有什麼simillar你ar e尋找。無論如何希望這可以幫助。

FIDDLE