动画滑动的 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>

- Avi

Answer 1

坦白说，我知道为什么会“弹跳”。你的黄色容器被放置在最终位置上（当可见时使用visibility:hidden）。当你开始动画时，菜单首先向上移动（动画起点），然后向下移动。

要解决这个问题，您可能需要在黑色菜单下面的未显示时将黄色容器定位，但是......在我看来，您的html有些混乱（我不是指任何冒犯之意），因为您的容器位于包含按钮的中，并且是红色菜单的子级......更改所有这些可能会搞砸一切。

但是，您的菜单效果可以仅使用非常简单的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代码（在单击按钮时添加或删除类）：

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

您可能已经找到了类似于您所寻找的东西。希望这能对您有所帮助。 FIDDLE

- Alvaro Menéndez

---

感谢您的详细回答。它解释了很多问题，但不幸的是，由于这是一个Angular项目，我们避免添加纯jQuery代码，因此无法将纯jQuery集成到该项目中。我一直在尝试将您的评论应用于我的Angular代码，但到目前为止还没有成功 :/ - Avi

没问题。很高兴你得到了一个提供简单解决方案的答案。祝你的项目顺利。 - Alvaro Menéndez

Answer 2

试试这个：

.myhidden{ top:-2000px; }

- SirDemon

Answer 3

只需从 div 元素中删除 third-in 和 third-out 类，即可停止弹跳效果。

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

- samyak bhalerao

---

但是那样就没有动画了。对吗？ - Avi

是的，将会有向上滑动和向下滑动的动画。 - samyak bhalerao

不幸的是，如果我删除第三个进第三个出，动画效果将完全丢失。 - Avi