摺疊/展開的角

Question

動畫我有這樣一些代碼這個

<div ng-click="showMore = true">show more</div> 
<div class="show-more' ng-show="showMore"> 
    <div class="cell"> 
     //some span 
    </div> 
    <div class="cell"> 
     //some div 
    </div> 
    <div ng-click="showMore = false">show less</div> 
</div> 

，當用戶點擊「顯示更多」，我想表明在動漫

其餘的在我的CSS

.cell { 
    padding-top: 20px; 
    padding-bottom: 15px; 
    height: 110px; 
} 

我得擺脫ng-show或ng-hide，因爲display:block或display:none不會讓transition: height 0.5s linear;工作。所以我試着將.cell的高度設置爲0，當它被展開時將它設置爲110px，但是當它摺疊時單元格高度不是0，因爲它包含<span>或<div>，它們有高度和填充

如何在我的情況下動畫展開/摺疊過程？在此先感謝

Answer 1

這是否適合你;]？

.show-more { 
 
    -webkit-transition: max-height 1s; 
 
    -moz-transition: max-height 1s; 
 
    -ms-transition: max-height 1s; 
 
    -o-transition: max-height 1s; 
 
    transition: max-height 1s; 
 
    background: #e5feff; 
 
    overflow: hidden; 
 
    max-height: 0; 
 
} 
 
.show-more.show { 
 
    max-height: 300px; 
 
}

<div ng-click="showMore = true">show more</div> 
 
<div class="show-more" ng-class="{'show': showMore}"> 
 
    <div class="cell"> 
 
     //some span 
 
    </div> 
 
    <div class="cell"> 
 
     //some div 
 
    </div> 
 
    <div ng-click="showMore = false">show less</div> 
 
</div>

Answer 2

爲什麼你試圖通過腳本方式？你爲什麼不使用Bootstrap Collapse class，它的所有內置動畫將附帶