```
删除按钮滑动效果：开始使用transform属性，将按钮往右移动隐藏，
然后将整个item内容区域也往右移动一样的距离，再通过margin将距离拉回去，
不加这个的话，能实现效果，但是内容区域不会动，会被删除按钮区域隐藏
page{
background-color: #f1f1f1;
}
.box{
margin-bottom: 100rpx;
}
.list{
background-color: #fff;
display: flex;
justify-content: space-between;
width: 96%;
overflow: hidden;
border-radius: 30rpx;
margin:10rpx auto 0;
}
.item{
display: flex;
align-items: center;
padding: 20rpx;
width: 100%;
transition: all 0.4s;
/* 右移90px */
transform: translatex(90px);
/* 距离右边负90px,刚开始正常显示 */
margin-left: -90px;
}
.circle{
padding:0 10rpx;
}
.img image{
width: 180rpx;
height: 180rpx;
}
.content{
height: 180rpx;
position: relative;
padding-left: 20rpx;
padding-right: 20rpx;
}
.title{
margin-bottom: 8rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*想省略几行就写几*/
-webkit-box-orient: vertical;
}
.subTitle{
font-size: 26rpx;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*想省略几行就写几*/
-webkit-box-orient: vertical;
}
.price{
position: absolute;
left: 20rpx;
bottom: 0;
color: red;
font-size: 26rpx;
}
/* 删除按钮 */
.update{
position: absolute;
bottom: 0;
left: 200rpx;
width: 200rpx;
display: flex;
align-items: center;
}
.add{
width: 40rpx;
height: 40rpx;
color: #fff;
background-color: #666;
text-align: center;
}
.reduce{
width: 40rpx;
height: 40rpx;
border: 1rpx solid #999;
text-align: center;
}
.value{
width: 80rpx;
text-align: center;
}
.remove{
background-color: red;
color: #fff;
display: flex;
width: 80px;
justify-content: center;
align-items: center;
/* 向右移动90px，刚好隐藏删除按钮 */
transform: translatex(90px);
transition: all 0.4s;
}
/* 让删除按钮和文本区域，移动距离都变成0 */
.isMove .item,.isMove .remove{
transform: translatex(0);
}
/* 结算区域 */
.settlement{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;
background-color: #fff;
align-items: center;
height: 80rpx;
}
.allSelect{
display: flex;
justify-content: flex-start;
align-items: center;
}
.allSelect{
padding-left: 40rpx;
height: 80rpx;
}
.allIcon{
padding-right: 10rpx;
margin-top: 6rpx;
}
.allSelect view:nth-child(2){
font-size: 28rpx;
color: #999;
}
.count{
height: 80rpx;
line-height: 80rpx;
padding: 0 10rpx;
color: #fff;
font-size: 28rpx;
background: rgb(52, 233, 7);
}
.countDisabled{
line-height: 80rpx;
height: 80rpx;
background: #ccc;
padding: 0 10rpx;
color: #fff;
font-size: 28rpx;
}
```
不给item加margin的效果：
