Vue动画效果-商品加入购物车
购物类app中常有商品加入购物车的动画需求
主要实现代码
type Fn = (...args: any[]) => void interface Events { [name: string]: Fn[] } export class EventEmitter { events: Events constructor() { this.events = {} } on(type: string, fn: Fn) { if (!this.events[type]) { this.events[type] = [] } this.events[type].push(fn) } off(type?: string, fn?: Fn) { if (!type && !fn) { this.events = {} return this } if (type) { if (!fn) { this.events[type] = [] return this } const events = this.events[type] if (!events) { return this } let count = events.length while (count--) { if (events[count] === fn) { events.splice(count, 1) } } return this } } emit(type: string, ...args: any[]) { const events = this.events[type] if (!events) { return } let ret for (let i = 0; i < events.length; i++) { const fn = events[i] if (fn) { ret = fn.apply(this, args) as unknown if (ret === true) { return ret } } } } distory() { this.events = {} } }
因为触发事件和实现不在一个文件中,添加了一个单利处理事件
let eventBus: EventEmitter export function useEventBus() { if (!eventBus) { eventBus = new EventEmitter() } return eventBus }
type Fn = (...args: any[]) => void interface Events { [name: string]: Fn[] } export class EventEmitter { events: Events constructor() { this.events = {} } on(type: string, fn: Fn) { if (!this.events[type]) { this.events[type] = [] } this.events[type].push(fn) } off(type?: string, fn?: Fn) { if (!type && !fn) { this.events = {} return this } if (type) { if (!fn) { this.events[type] = [] return this } const events = this.events[type] if (!events) { return this } let count = events.length while (count--) { if (events[count] === fn) { events.splice(count, 1) } } return this } } emit(type: string, ...args: any[]) { const events = this.events[type] if (!events) { return } let ret for (let i = 0; i < events.length; i++) { const fn = events[i] if (fn) { ret = fn.apply(this, args) as unknown if (ret === true) { return ret } } } } distory() { this.events = {} } }
使用方法
<div class="shop-cart__ball-container"> <div v-for="(v, i) in items" :key="i"> <Transition @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter"> <div class="ball" v-show="v.isShow"> <div class="inner"></div> </div> </Transition> </div> </div> .ball-container { .ball { position: fixed; bottom: 10px; left: 25px; transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); .inner { width: 22px; height: 22px; border-radius: 50%; background: var(--op-primary-color); transition: all 0.4s linear; } } }
具体项目代码地址:http://github.com/duzhaoquan/ele-h5.git