CSS：點擊刪除圖標時左側的過渡列表

Question

我正在使用ionic開發移動應用程序。在此我想實現刪除功能是這樣的：

正如我們看到有對每一個列表項的左側的圖標，該圖標點擊後，列表轉換到左側面和刪除按鈕顯示在屏幕上。

我想實現相同的功能..但不能寫正確的CSS。請指導我如何做這項工作。 這裏是我的鏈接plunkr

Answer 1

你可以使用ionic list指令。

<ion-list ng-controller="MyCtrl" 
     show-delete="shouldShowDelete" 
     show-reorder="shouldShowReorder" 
     can-swipe="listCanSwipe"> 
    <ion-item ng-repeat="item in items" 
     class="item-thumbnail-left"> 

<img ng-src="{{item.img}}"> 
<h2>{{item.title}}</h2> 
<p>{{item.description}}</p> 
<ion-option-button class="button-positive" 
        ng-click="share(item)"> 
    Share 
</ion-option-button> 
<ion-option-button class="button-info" 
        ng-click="edit(item)"> 
    Edit 
</ion-option-button> 
<ion-delete-button class="ion-minus-circled" 
        ng-click="items.splice($index, 1)"> 
</ion-delete-button> 
<ion-reorder-button class="ion-navicon" 
        on-reorder="reorderItem(item, $fromIndex, $toIndex)"> 
    </ion-reorder-button> 

</ion-item> 
</ion-list> 

控制器：

app.controller('MyCtrl', function($scope) { 
$scope.shouldShowDelete = false; 
$scope.shouldShowReorder = false; 
$scope.listCanSwipe = true 
});