我的应用程序中有一个导航栏和一个子导航栏.在子栏中,可以按下按钮,我希望此按钮打开一个新的子栏,隐藏原始栏.
新的子栏应从主栏后面滑动并隐藏第二个栏.
问题是:
>当第三个条出现时,它反弹而不是平滑
>当第三个柱子消失时,它就会消失,并且不会像我预期的那样向后滑动
我在这里附上片段.或者你可以在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;
}
最佳答案
试试这个:
原文链接:https://www.f2er.com/html/426142.html.myhidden{ top:-2000px; }