android仿饿了么购物车效果,仿饿了么购物车跳动

[TOC]

#### 仿饿了么购物车跳动动画


* [ ] 实现思路

1. 点击添加购物按钮，发布事件给父组件

2. 父组件监听事件，改变全局变量，延迟500ms后在还原变量

* [ ] 实现代码

1. vuex 中添加全局变量，控制动画显示 / 隐藏

~~~

export default {

state: {

showCart: false // 控制动画样式显示 || 隐藏

},

~~~

*****

2. 绑定动画样式


~~~

{{totalCount}}

~~~

~~~

.left-cart

flex 0 0 54px

width 54px

height 54px

margin -10px 16px 0 16px

z-index 9999

border-radius 50%

background-color: #131d26;

display flex

align-items center

justify-content center

&.animationShake

animation:bottomNav-shake .5s ease-in-out

@keyframes bottomNav-shake

0%

transform scale(1)

25%

transform scale(.8)

50%

transform scale(1.1)

75%

transform scale(0.9)

to

transform scale(1)

~~~

*****

3. 监听添加购物按钮，发布事件


~~~

~~~

~~~

methods: {

plus() {

if (!this.foods.count) {

this.$set(this.foods, 'count', 1)

} else {

this.foods.count++

}

this.$emit('add')

},

~~~

*****

4.父组件监听事件，执行逻辑

~~~

~~~

~~~

methods: {

onAddHandle() {

this.setShowCart(true).then(() => {

setTimeout(() => {

// 调用子组件方法，隐藏样式

this.$refs.shopCart.hide()

},500)

})

}

},

~~~