CSS：单击删除图标时向左转换列表答案

【问题标题】：CSS : Transition list to left when clicked on delete iconCSS：单击删除图标时向左转换列表
【发布时间】：2016-09-11 05:49:05
【问题描述】：

我正在使用ionic 开发一个移动应用程序。在这我试图实现这样的删除功能：

正如我们所见，每个列表项的左侧都有一个图标，当单击该图标时，列表转换到左侧并在屏幕上显示删除按钮。

我想实现相同的功能..但无法编写正确的 CSS。请指导我如何完成这项工作。这是我的plunkr的链接

【问题讨论】：

Is this it?
@aug 这不是我需要的。我希望默认显示减号图标。当用户点击该图标时，列表应向左转换并显示删除按钮。

标签： html css angularjs twitter-bootstrap ionic-framework

【解决方案1】：

你可以使用离子列表指令。

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

【讨论】：

您可以使用自定义 css 设计一个列表视图，然后需要开发自定义指令，该指令将在诸如 on-swipe-left 或 on-swipe-right 等事件中可用以删除或编辑记录。