在学习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)