[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) }) } }, ~~~