用css動畫刪除列表項目

我製作了一個顯示/隱藏消息列表的動畫。見this plunk。但是，如何在消息從列表中刪除時如何調整它以製作動畫呢？用css動畫刪除列表項目

我的CSS：

.messages-active.messages { 
    max-height: 50px; 
} 

.messages { 
    -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-color: AntiqueWhite; 
    overflow: hidden; 
    max-height: 0; 
}

我的索引文件（使用角）：

<body ng-app="app" ng-controller="TestCtrl as test"> 
    <button ng-click="test.toggle = !test.toggle">Show messages</button> 
    (current: {{test.toggle}}) 
    <div class="messages" ng-class="{ 'messages-active': test.toggle }" ng-repeat="message in test.messages"> 
    {{message}} <a href ng-click="test.remove($index)">remove</a> 
    </div> 
</body>

來源

2015-06-23 EricC

我不認爲CSS動畫將在此工作，那些消息是AngularJS一部分，所以你必須嘗試的JavaScript，角本身動畫他們。 – VoidBOY

這個想法是設置容器的高度並向高度添加轉換。

$scope.styles.height = $scope.messages.length * 20 + 'px';

http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview

來源

2015-06-23 09:09:35 demkalkov

你可以試試下面的，如果它可以幫助你。點擊刪除而不是刪除元素只需添加類別messages-remove它的父div messages。

例如：它應該變成<div class="messages"至<div class="messages messages-remove"。

還要在樣式表中添加以下CSS。

.messages-active.messages-remove.messages, 
.messages-remove.messages { max-height: 0px; }

讓我知道你是否有任何問題。

來源

2015-06-23 09:02:17

用css動畫刪除列表項目

回答

相關問題