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