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 
});