[TOC] ## 簡單動畫 ``` <transition> <div class="list-mark" v-show="listShow" @click="toggleList"></div> </transition> //css .list-mark background:rgba(7,17,27,0.6) &.v-enter-active,&.v-leave-active transition:all 0.3s linear &.v-enter,&.v-leave-to opacity:0 background:rgba(7,17,27,0) ``` ## 復雜動畫 ``` <transition > <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart()"> <span class="icon-remove_circle_outline inner"></span> </div> </transition> //css .cart-decrease color:#068dc7 .inner line-height:24px font-size:24px &.v-enter-active,&.v-leave-active transition:all 0.3s linear &.v-enter,&.v-leave-to opacity:0 transform:translate3d(30px, 0, 0) .inner transform:rotate(180deg) ``` 如果一個元素需要表示兩種動畫軌跡如移動加旋轉,則可以分離出一個 `span` 然后在分別給 父類和子類添加不同的動畫 ## 給組件中添加動畫 可直接在組件中添加動畫 ``` <template> <transition> <div v-show="showFlag" class="food"> </div> </transition> </template> <style scoped lang="stylus" type="stylesheet/stylus"> .food position:fixed left:0 top:0 bottom:49px z-index:30 width:100% background:#fff opacity:0.5 &.v-enter-active,&.v-leave-active transition:all 0.2s linear transform:translate3d(0, 0, 0) &.v-enter,&.v-leave-to transform:translate3d(100%, 0, 0) opacity:0 </style> ``` ### animate.css `npm install animate.css -S` ``` import animate from ‘animate.css’ Vue.use(animate) ``` 在vue中 ``` <!--出發按鈕--> <button @click="show = !show;">transition</button> //<!--統一 寫入animated--> <transition enter-active-class="slideInUp" leave-active-class="jello"> //注意此處有 class 為 animated <p v-show="show" class="animated">hello word 1</p> </transition> //<!--分開寫入animated--> <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight" > <p v-show="show">hello word 2</p> </transition> //<!--一組動畫--> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight" > <p v-show="show" class="animated" :key="1">word 1</p> <p v-show="show" class="animated" :key="2">word 1</p> </transition-group> //<!- 直接在class 上引入 js--> <div class="box animated bounceInDown"></div> ```