[TOC] #### Vue結合animate.css 實現動畫 1. 基本動畫 ~~~ <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> ~~~ ***** 2. 控制動畫幀 在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認情況下，Vue 會等待其在過渡效果的根元素的第一個`transitionend`或`animationend`事件。 然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。 在這種情況下你可以用`<transition>`組件上的`duration`屬性定制一個顯性的過渡持續時間 (以毫秒計)： ~~~ <transition :duration="1000">...</transition> ~~~ 你也可以定制進入和移出的持續時間： ~~~ <transition :duration="{ enter: 500, leave: 800 }">...</transition> ~~~ ***** #### 購物車滾動動畫  1. html 結構 ~~~ <template> <div class="cartcontrol"> <transition name="move"> <div class="cart-decrease" v-show="food.count>0" @click.stop="decrease"> <span class="inner icon-remove_circle_outline"></span> </div> </transition> <div class="cart-count" v-show="food.count>0">{{food.count}}</div> <div class="cart-add icon-add_circle" @click.stop="add"></div> </div> </template> ~~~ 2. 樣式 ~~~ <style lang="stylus" scoped> @import "~common/stylus/variable" .cartcontrol display: flex align-items: center .cart-decrease display: inline-block padding: 6px opacity: 1 .inner display: inline-block line-height: 24px font-size: $fontsize-large-xxx color: $color-blue transition: all 0.4s linear transform: rotate(0) &.move-enter-active, &.move-leave-active transition: all 0.4s linear &.move-enter, &.move-leave-active opacity: 0 transform: translate3d(24px, 0, 0) .inner transform: rotate(180deg) .cart-count width: 12px line-height: 24px text-align: center font-size: $fontsize-small-s color: $color-grey .cart-add display: inline-block padding: 6px line-height: 24px font-size: $fontsize-large-xxx color: $color-blue </style> ~~~