[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> ~~~