当我显示垃圾内容时,我尝试应用过渡时间。我一直在尝试使用在Show hidden div on ng-click within ng-repeat上看到的解决方案,正是Joseph Silber建议的变体。我不明白为什么它在他的榜样上起作用,而在我的榜样上却没有。我希望div慢慢调整大小。
HTML部分
<div id="trash" ng-app="myApp" ng-controller="test">
<div class="trash-content" ng-class="{ 'hidden': ! showDetails }">
<ul>
<li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>
</li>
</ul>
</div>
<button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
</div>
CSS部分
.trash-content {
width: 300px;
height: 400px;
background-color: lightgrey;
border: 1px solid #e0e0e0;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
color: rgb(102, 103, 105);
overflow: hidden;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
transition: 2s;
}
.hidden {
max-height: 0;
max-width: 0;
}
小提琴上的完整问题:http://jsfiddle.net/63xoxx37/1/
最佳答案
尝试以下操作(使用opacity:0;
代替display:none;
):
.trash-content {
width: 300px;
height: 400px;
background-color: lightgrey;
border: 1px solid #e0e0e0;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
color: rgb(102, 103, 105);
transition: 2s linear all;
-webkit-transition: 2s linear all;
opacity: 1;
}
.h {
max-height: 0;
max-width: 0;
opacity: 0;
}
<div id="trash" ng-app="myApp" ng-controller="test">
<div class="trash-content" ng-class="{ 'h': ! showDetails }">
<ul>
<li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>
</li>
</ul>
</div>
<button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
</div>