javascript - 在上部 div 上应用 ng-animate 后防止底部 div 偏移

Question

我有一个带有标题和按钮的顶部 div 以及一个带有一些文本的底部 div。当我单击按钮时，我希望底部的文本出现并且按钮在一秒钟内逐渐消失。行为正常，但问题是按钮消失后，头部 div 变短，底部 div 向上移动，导致不愉快的行为。

我的问题是。即使在按钮消失后，如何保持顶部 div 的高度固定？

我可以想象有很多方法。我可以用按钮的相同高度放置一些看不见的东西来保持空间，但感觉不优雅。我可以将 head div 设置为固定高度，但它在不同屏幕上看起来不一样，也不会那么流畅。

什么是简单优雅的方法？

<div class="jumbotron">
    <h1><span class="hometitle">title</h1>
    <button class="btn btn-primary animate-show" type="button" ng-click="ctrl.showPoll = true" ng-show="!ctrl.showPoll">click here to show question</button>
</div>

    <div class="row marketing">
        <div class="col-lg-12">
            <form name="votForm" ng-show="ctrl.showPoll" ng-controller="frmCtrl as frm" ng-submit="frm.addVote(votForm.$valid)" novalidate>
                <p>question</p>
                <input ng-model="frm.vote" type="radio" name="myVote" value="1" required>op 1<br>
                <input ng-model="frm.vote" type="radio" name="myVote" value="2">op 2<br>
                <input ng-model="frm.vote" type="radio" name="myVote" value="3">op 3<br>
                <input ng-model="frm.vote" type="radio" name="myVote" value="4">op 4.<br>
                <input type="submit" value="submit" name="click me" >
                <div class="panel" ng-show="frm.showError">Please select an option before submitting </div>
            </form>
        </div>
    </div>

js

app.controller('votCtrl', ['$cookies', function($cookies){
    var showPoll = false;
    this.hasVoted = $cookies.iVoted || "nustiu";

}]);

CSS

.animate-show {
    opacity: 1;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
    -webkit-transition: all linear 1s;
    transition: all linear 1s;
}

.animate-show.ng-hide {
    opacity: 0;
}

Answer 1

你不能依赖于 ng-hide 类。它是一个内置的 AngularJS 类，它会从字面上隐藏你的按钮，我的意思是它会添加 display: none 到它。那不是你想要的。删除 ng-show 指令并添加 ng-class。

<button class="btn btn-primary animate-show" type="button" ng-click="ctrl.showPoll = true" ng-class="{'hidden-button': ctrl.showPoll}">click here to show question</button>

然后在 CSS 中:

.hidden-button {
  opacity: 0;

  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -ms-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
}