Блог

У меня есть билет, как вы видите на картинке ниже:

Таким образом, билет включает компонент корзины, который является значком корзины, который вы видите, и у него есть анимация, когда вы нажимаете, крышка корзины поднимается и возвращается снова. Поэтому я хотел удалить этот билет с задержкой, потому что я хочу показать анимацию, о которой я упоминал.Вот мой компонент удаления:

 lt;templategt;  lt;div id="delete-button" @click.prevent="removeProductFromCart(item.id)"gt;  lt;input type="checkbox" id="checkbox"gt;  lt;div id="bin-icon"gt;  lt;div id="lid"gt;lt;/divgt;  lt;div id="box"gt;  lt;div id="box-inner"gt;  lt;div id="bin-lines"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt; import cartHelper from "../helpers/cartHelper";  export default {  props: {  item: Object,  },  data() {  return {  loading: false,  };  },  methods: {  removeProductFromCart(id) {  this.loading = true;  setTimeout(() =gt; {  cartHelper.removeFromCart(id, (response) =gt; {  this.$store.dispatch('removeProductFromCart', {  cart: response.data,  })  this.loading = false  });  }, 1000)  }  }; lt;/scriptgt;  

и 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.

Я думаю, это потому, что ваш флажок никогда не «проверяется».
Вы можете либо добавить это в свой метод, либо просто обернуть этот блок меткой.

 lt;templategt;  lt;label for="checkbox" id="delete-button" @click="removeProductFromCart(item.id)"gt;  lt;input type="checkbox" id="checkbox"gt;  lt;div id="bin-icon"gt;  lt;div id="lid"gt;lt;/divgt;  lt;div id="box"gt;  lt;div id="box-inner"gt;  lt;div id="bin-lines"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/labelgt; lt;/templategt;