```
刪除按鈕滑動效果：開始使用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的效果：
