[TOC] #### 仿饿了么购物车跳动动画  * [ ] 实现思路 1. 点击添加购物按钮，发布事件给父组件 2. 父组件监听事件，改变全局变量，延迟500ms后在还原变量 * [ ] 实现代码 1. vuex 中添加全局变量，控制动画显示 / 隐藏 ~~~ export default { state: { showCart: false // 控制动画样式显示 || 隐藏 }, ~~~ ***** 2. 绑定动画样式  ~~~ <div class="left-cart" :class="{animationShake: showCart}"> <div class="cart-icon" :class="{highlight: totalPrice > 0}"> <i class="icon-shopping_cart"></i> <span class="icon-count" v-show="totalCount">{{totalCount}}</span> </div> </div> ~~~ ~~~ .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. 监听添加购物按钮，发布事件  ~~~ <div class="plus" @click.stop="plus"> <span class="icon-add_circle"></span> </div> ~~~ ~~~ methods: { plus() { if (!this.foods.count) { this.$set(this.foods, 'count', 1) } else { this.foods.count++ } this.$emit('add') }, ~~~ ***** 4.父组件监听事件，执行逻辑 ~~~ <!-- 购物组件 --> <cart-control :foods="food" @add="onAddHandle"/> ~~~ ~~~ methods: { onAddHandle() { this.setShowCart(true).then(() => { setTimeout(() => { // 调用子组件方法，隐藏样式 this.$refs.shopCart.hide() },500) }) } }, ~~~