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

在上部div上应用ng-animate后，防止底部div移位

1 个答案: