一个vue2.0动画+stylus的博客文章地址：https://www.cnblogs.com/jr1993/p/vue.html
以前这样子写的
<div transition="move" class="cart-decrease" v-show="food.count>0" @click="decreaseCart"><span class="inner icon-remove_circle_outline"></span></div>现在要这样子写:
但是，style写法还是一样的，是父子级关系： .move 与 .cart-decrease 是父子级关系
<div class="cartcontrol"><transition name="move"><div class="cart-decrease" v-show="food.count>0" @click="decreaseCart"><span class="inner icon-remove_circle_outline"></span></div></transition></div>
stylus写法
减号字体图标 动画 ：
- 向左平移 （opacity：0 >1）
- 里面的一横旋转180度 (transform rotate0 > 180deg)
- 回来时相反
<style lang="stylus" rel="stylesheet/stylus">.cartcontrolfont-size 0px.cart-decrease // .move 与 .cart-decrease 是 同级关系 display inline-blockpadding 6pxtransition all 0.4s linear &.move-enter-active , &.move-leaveopacity 1transform translate3d(0,0,0).innertransform rotate(0deg).innerdisplay inline-blockline-height 24pxfont-size 24pxcolor rgb(0,160,220)transition all 0.4s linear&.move-enter, &.move-leave-activeopacity 0transform translate3d(24px,0,0).innertransform rotate(180deg)
</style>另一个动画样式写法：
<transition name="fade" ><div class="list-mask" @click="hideList" v-show="listShow"></div></transition>.list-maskposition fixedtop 0left 0width 100%height 100%z-index 40// 动画最终的状态background-color rgba(7,17,27,0.6) //这个一定要写上，不能省略，-webkit-backdrop-filter blur(10px)backdrop-filter blur(10px)// 动画开始->最终的状态&.fade-enter-active, &.fade-leave transition: all 0.5s linearbackground-color rgba(7,17,27,0.6)// 动画最终的状态->动画结束&.fade-enter, &.fade-leave background-color rgba(7,17,27,0)transition: all 0.6s linear