1、vuex数据持久化
//数据持久化,每次调用mutations的时候都会触发这个函数
store.subscribe((mutations,state)=>{
localStorage.setItem('cartarray',JSON.stringify(state.cartarray));
})
export default store
2、购物车动画实现思路
<div class="ball-wrap">
<transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<div class="ball" v-if="ball.show">
<div class="inner">
<i class="cubeic-add"></i>
</div>
</div>
</transition>
</div>
beforeEnter(el){
//让小球移动到点击的位置
//获取点击位置
const dom = this.ball.el;
//获取点击DOM的位置
const rect=dom.getBoundingClientRect();
const x = rect.left-window.innerWidth*0.7;//负值
const y = -(window.innerHeight - rect.top);//负值
console.log(x)
console.log(y)
el.style.display="block";
el.style.transform = `translate3d(0,${y}px,0)`;
const inner = el.querySelector('.inner');
inner.style.transform = `translate3d(${y}px,0,0)`;
},
enter(el,done){
//触发重绘
document.body.offsetHeight
//小球回到原点,就是购物车位置
el.style.transform=`translate3d(0,0,0)`;
const inner = el.querySelector('.inner');
inner.style.transform=`translate3d(0,0,0)`;
//过渡完成后执行的事件
el.addEventListener('transtionend',done);
},
afterEnter(el){
//结束隐藏小球
this.ball.show = false;
el.style.display ="none";
}
},