关键词：transition页面过渡与动画

示例1：页面从右翻到左

1
2
3
4
//html模块
<div class="food" v-show="showFlag" transition="move">
    ...
</div>
1
2
3
4
5
6
7
css模块
.food
 &.move-transition //准备执行动画效果
   transition all 0.4 linear
   transform translate3d(0, 0, 0)
 &.move-enter, &.move-leave //进入动画效果，离开动画效果
   transform translate3d(100%, 0, 0)//从右到左，平移了相对宽度100%

示例2：页面显现隐藏

1
2
3
4
//html模块
<div class="detail" v-show="detailShow" transition="fade">
    ...
</div>
1
2
3
4
5
6
7
8
css模块
.detail
  &.fade-transition//准备执行动画效果
    opacity 1
    background rgba(7,17,27,0.8)
  &.fade-enter,&.fade-leave //进入动画效果，离开动画效果
    opacity 0
    background rgba(7,17,27,0)

示例3：页面显现折叠

1
2
3
4
//html模块
<div class="shopcart-list" v-show="listShow" transition="fold">
    ...
</div>
1
2
3
4
5
6
7
css模块
.shopcart-list
  &.fold-transition//准备执行动画效果
    transition all 0.5s
    transform translate3d(0,-100%,0)
  &.fold-enter,&.fold-leave //进入动画效果，离开动画效果
    transform translate3d(0,0,0)

示例4：2个动画效果，平移和滚动同步

1
2
3
4
//html模块
<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart" transition="move">
  <span class="inner icon-remove_circle_outline"></span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
css模块
.cart-decrease
    transition all 0.4s linear// CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线
    &.move-transition
      opacity 1
      transifrom translate3d(0,0,0)//外层平移从0到24px
      .inner//内层滚动从0到180度
        transition all 0.4s linear
        transform rouate(0)
    &.move-enter,&.move-leave
      opacity 0
      transifrom translate3d(24px,0,0)//3D旋转，X轴位移24px
      .inner
        transform rouate(180deg)//内层滚动从0到180度