javascript - ng-class 的 css 过渡效果

Question

当我的垃圾内容出现时，我尝试应用过渡持续时间。我一直在尝试使用 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;
}

Fiddle 上的完整问题: http://jsfiddle.net/63xoxx37/1/

Answer 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>