css将商品加入购物车,vue实现点击商品加入购物车动画
时间: 2023-08-23 21:06:56 浏览: 77
可以使用Vue的过渡动画功能来实现点击商品加入购物车的动画效果。具体实现步骤如下:
1. 在Vue组件中定义一个data属性,用于保存购物车中的商品列表。
2. 在商品列表中,为每个商品绑定一个@click事件,当用户点击该商品时,将该商品添加到购物车中。
3. 在购物车中,使用Vue的v-for指令遍历购物车中的商品列表,并使用Vue的过渡动画功能为每个商品添加动画效果。
下面是一个简单的示例代码:
```
<template>
<div>
<div class="product-list">
<div v-for="(product, index) in productList" :key="index" @click="addToCart(product)">
{{ product.name }} - {{ product.price }}
</div>
</div>
<div class="cart">
<div v-for="(item, index) in cart" :key="index" class="cart-item" v-bind:class="{ 'cart-item-enter-active': isCartActive, 'cart-item-enter': !isCartActive }">
{{ item.name }} - {{ item.price }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
productList: [
{ name: '商品1', price: 10 },
{ name: '商品2', price: 20 },
{ name: '商品3', price: 30 },
],
cart: [],
isCartActive: false,
}
},
methods: {
addToCart(product) {
this.cart.push(product)
this.isCartActive = true
setTimeout(() => {
this.isCartActive = false
}, 500)
},
},
}
</script>
<style>
.cart-item-enter-active {
animation: cart-item-enter 0.5s;
}
.cart-item-enter {
opacity: 0;
transform: scale(0.5);
}
@keyframes cart-item-enter {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>
```
在上面的示例代码中,当用户点击商品时,将商品添加到购物车中,并为购物车添加一个动画效果。动画效果使用了CSS的@keyframes和animation属性来实现。具体实现方法可以参考示例代码中的样式部分。