// vue中的动画 当dom显示或者隐藏时 vue可以管理动画
// transition 单元素动画
<transition name=""
@before-enter="beforeEnter"
@enter=""
@after-enter=""
@before-leave=""
@leave=""
@after-leave=""
> </transition>
v-enter {} 进入的一瞬间
v-enter-active{}
v-enter-to{}
v-leave{}
v-leave-active{}
v-leave-to{}
methods: {
before-enter(el) {
el.style.background = 'yellow'
}，
enter(el, done) { // velocity
el.style.background = 'red'
setTimeout(() => {
done() // 调用done才能执行afterEnter
}, 1000)，
afterEnter () {
}
}
}
<div v-for="(p, index) in products" ref="lists">
<img :src="p" alt="">
<button @click="addCart(index)">添加购物车</button>
</div>
<transition @enter>
<div class="animate" v-if="isShow"></div>
</transition>
<div class="cart"></div>
enter(el, done){
let div = this.$refs.lists[this.currentIndex]
let {x, y} = getBoundingClientRect()
el.style.left = x + 'px'
el.style.top = y + 'px'
el.style.background = `url()`
el.addEventListener('transitionEnd', done)
}
after-enter() {
this.isShow = false
}
addCart(index) {
this.currentIndex = index
this.isShow = true
}
vue添加购物车效果
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
