vue2.0 多个css过渡效果的组合应用

在学习vue2.0版本的过程中，入门实战项目学习的是慕课网的《Vue.js饿了么高仿实战》，这个项目利用的是vue1.0的版本，其中有一个css过渡动画的效果，在vue 2.0中经过本人的尝试，也实现了，特记录分享学习过程！

实现的效果如下所示：

模板结构如下：

< template >

< div class= "chart-ctrl-wrapper" >

< transition name= "move" >

< div class= "decrease" v-show="food.count> 0" >

< span class= "inner" @click="decreaseChart($event)" >< i class= "icon-remove_circle_outline" ></ i ></ span >

</ div >

</ transition >

< span class= "num" v-show=" this.food.count> 0" >{{ this.food.count}} </ span >

< span @click="addChart($event)" class= "add" >< i class= "icon-add_circle" ></ i ></ span >

</ div >

</ template >

css 样式如下：

<!-- Add "scoped" attribute to limit CSS to this component only -->

< style lang= 'stylus' rel= 'stylesheet/stylus' scoped >

.chart-ctrl-wrapper

font-size 0

.decrease, .add

display inline-block

padding 6px

line-height 24px

font-size 24px

color rgb( 0, 160, 220)

vertical-align top

text-align center

.decrease

.inner

display inline-block

height 24px

transition all .3s linear

&.move-enter,&.move-leave-to

transform translateX( 24px)

opacity 0

.inner

transform rotate( 180deg)

&.move-enter-active,&.move-leave-active

transition all 0.3s linear

.num

display inline-block

width 12px

line-height 24px

padding-top 6px

vertical-align top

font-size 10px

color rgb( 147, 153, 159)

text-align center

</ style >

要组合实现多个css效果的过渡，这里用到了嵌套，外层过渡实现平移translate ,内存inner实现滚动 效果！

其中关键的是

.decrease
      .inner
        display inline-block
        height 24px
        transition all .3s linear
      &.move-enter,&.move-leave-to
        transform translateX(24px)
        opacity 0
        .inner
          transform rotate(180deg)