使用UI網格動畫隱藏

我有一個表單，在頁面底部使用隱藏隱藏包含UI網格表格的div，如文檔中的Hidden Grids教程所示。當用戶點擊提交按鈕時，網格將按預期顯示，但其顯示不是動畫。奇怪的部分是包含網格的div看起來非常精細。使用UI網格動畫隱藏

我已複製此Plunker中的問題，這裏是相關的代碼供參考。這一個真的讓我很難過，所以任何建議都非常感謝。謝謝！

HTML

<h4><a href="#" ng-click="hidden = ! hidden">Reveal</a></h4> 
<div class="background animate-hide" ng-hide="hidden"> 
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
</div>

CSS

.grid { 
    width: 500px; 
    height: 250px; 
    display: block; 
    position:relative; 
} 

.background { 
    padding: 15px; 
    background-color: #F7F7F7; 
} 

.animate-hide { 
    transition: opacity 0.4s ease-out 0.1s !important; 
    transition: height 0.5s ease-out !important; 
    opacity: 1; 
    height: 260px; 
} 

.animate-hide.ng-hide { 
    opacity: 0; 
    height: 0; 
}

}

來源

2015-07-12 dsal1951

是的，虛擬化的數據，動畫將無法正常工作。也許這個答案將有所幫助 - http://stackoverflow.com/questions/28901013/how-to-animate-angular-ui-grid-when-rows-are-added – sfletche

@sfletche它可以是動畫，它沒有任何使用虛擬化數據。原來是一個簡單的css問題 – dsal1951

就在。聽到那個消息很開心。感謝讓我保持循環。 – sfletche

由於電網具有明確的高度設置，它是溢出.background股利。 overflow CSS屬性的默認值爲visible，這意味着網格將溢出其容器的尺寸並且完全可見。

您可以通過添加overflow: hidden您.animate-hide類解決這個問題：

.animate-hide { 
    transition: opacity 0.4s ease-out 0.1s !important; 
    transition: height 0.5s ease-out !important; 
    opacity: 1; 
    height: 260px; 
    overflow: hidden; 
}

這裏的顯示效果更新plunker：http://plnkr.co/edit/3kO5HqSZTGVM8A3YScYq?p=preview

來源

2015-07-16 14:40:09 c0bra

我不能相信有多少小時試圖弄清楚這個問題是否與ui-grid虛擬化數據的方式有關，或者如果Angular 1.4中的變化影響了某些事情。我甚至沒有想到這是一個愚蠢的小CSS事情。我想這不是假設問題比實際更復雜，這是一個很好的教訓。非常感謝你的幫助！ – dsal1951

使用UI網格動畫隱藏

回答

相關問題