当我显示垃圾内容时,我尝试应用过渡时间。我一直在尝试使用在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>

10-05 20:57
查看更多