我在我的应用程序中有一个导航栏和一个子导航栏。在子栏中可以按下一个按钮,我希望这个按钮打开一个新的子栏,它将隐藏原始栏。动画滑动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;
}
<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>
它的工作!谢谢 :) – Avi