我有一張票，如下圖所示：
所以票包括 Bin 組件，它是你看到的 bin 圖示，當你點擊 bin 的蓋子時它有一個影片，它會上升并再次回來。所以我想延遲洗掉這張票，因為我想展示我提到的影片。這是我的洗掉組件：
<template>
<div id="delete-button" @click.prevent="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import cartHelper from "../helpers/cartHelper";
export default {
props: {
item: Object,
},
data() {
return {
loading: false,
};
},
methods: {
removeProductFromCart(id) {
this.loading = true;
setTimeout(() => {
cartHelper.removeFromCart(id, (response) => {
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
this.loading = false
});
}, 1000)
}
};
</script>
以及 bin 和影片的 css：
#delete-button {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
#checkbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
z-index: 3;
}
#bin-icon {
position: absolute;
width: 26px;
}
#lid {
position: relative;
width: 30px;
height: 4px;
left: -2px;
border-radius: 4px;
}
#lid:before {
content: '';
position: absolute;
top: -4px;
right: 0;
left: 0;
width: 10px;
height: 3px;
margin: 0 auto;
border-radius: 10px 10px 0 0;
}
#box {
position: relative;
height: 37px;
margin-top: 1px;
border-radius: 0 0 8px 8px;
}
#box-inner {
position: relative;
top: 2px;
width: 20px;
height: 32px;
margin: 0 auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
#bin-lines {
position: relative;
top: 7px;
margin: 0 auto;
}
#bin-lines, #bin-lines:before, #bin-lines:after {
width: 2px;
height: 20px;
border-radius: 4px;
}
#bin-lines:before, #bin-lines:after {
content: '';
position: absolute;
}
#bin-lines:before {
left: -8px;
}
#bin-lines:after {
left: 8px;
}
#layer {
position: absolute;
right: -20px;
bottom: -20px;
width: 0;
height: 0;
background-color: var(--link-text-color-hover);
border-radius: 50%;
transition: 0.25s ease all;
z-index: 1;
}
#lid, #lid:before,
#box, #bin-lines,
#bin-lines:before,
#bin-lines:after {
background-color: var(--button-color);
transition: 0.2s ease background-color;
}
#checkbox:checked ~ #bin-icon #lid,
#checkbox:checked ~ #bin-icon #lid:before,
#checkbox:checked ~ #bin-icon #box {
background-color: var(--link-text-color-hover);
}
#checkbox:checked ~ #bin-icon #bin-lines,
#checkbox:checked ~ #bin-icon #bin-lines:before,
#checkbox:checked ~ #bin-icon #bin-lines:after {
background-color: var(--link-text-color-hover);
}
#checkbox:checked #bin-icon #box {
animation: shake 0.2s ease 0.1s;
}
#checkbox:checked #bin-icon #lid {
animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
}
#checkbox:checked ~ #layer {
width: 226px;
height: 226px;
}
@keyframes shake {
0%{ transform: rotateZ(3deg); }
25%{ transform: rotateZ(0);}
75%{ transform: rotateZ(-3deg); }
100%{ transform: rotateZ(0); }
}
@keyframes lift-up {
0%{ top:0; }
50%{ top:-35px;}
100%{ top:0; }
}
@keyframes shake_u {
0%{ transform: rotateZ(0); }
25%{ transform:rotateZ(-15deg); }
50%{ transform:rotateZ(0deg); }
75%{ transform:rotateZ(15deg); }
100%{ transform:rotateZ(0); }
}
@keyframes shake_l {
0%{ transform:rotateZ(0); }
80%{ transform:rotateZ(3deg); }
90%{ transform:rotateZ(-3deg); }
100%{ transform:rotateZ(0); }
}
所以總的來說，當我點擊垃圾箱圖示時，我希望票被洗掉，但經過一段時間的延遲，因為我想顯示垃圾箱的影片（上限上下移動）。但像這樣，它只會洗掉它（沒有影片），只是有延遲。所以我想知道我該如何解決這個問題。我正在使用 Vue，但它可能有 js 或 css 解決方案。
uj5u.com熱心網友回復：
我認為這是因為您的復選框永遠不會被“選中”。
您可以將它添加到您的方法中，也可以只用標簽包裝該塊。
<template>
<label for="checkbox" id="delete-button" @click="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</label>
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357628.html
標籤：javascript css Vue.js Vuejs2 Vue 组件