在上div應用ng-animate後防止底部div的移位

Question

我有一個帶有標題和按鈕的頂部div以及帶有一些文本的底部div。當我點擊按鈕時，我想讓底部文本出現，並且按鈕在一秒鐘內消失。該行爲正常工作，但問題是在按鈕消失後，頭部div變短，底部div向上移動，導致不愉快的行爲。

我的問題是。即使按鈕消失後，如何保持高度固定的頂部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; 
}