2回答

tiyang

2017-01-12

已采纳

v- enter-to 在动画结束之后会被移出，所以你在 v-enter-to 里面定义了滑出来的位置，动画结束后它就又滑回去了。这一次动画和前几节课的动画不一样，前几节课都是动画开始的时候是先移到别处，结束的时候回到原来位置。这个动画是开始的时候是原来位置（收起来），结束的时候是移动后的位置。所以我们要反其道而行之。这么写就好了：

.shopcart-list
  position: absolute
  bottom: 48px
  left: 0
  z-index: -1
  width: 100%
  transition: all .5s
  &.fold-enter, &.fold-leave-to
    transform: translate3d(0, 100%, 0)
  &.fold-enter-to, &.fold-leave
    transform: translate3d(0, 0, 0)

0

1

PanameraTurboS

非常感谢！

2017-01-14

共1条回复

ustbhuangyi

2017-01-01

stylus 部分写的不对，仔细看看 2.0 的相关文档吧~https://vuefe.cn/v2/guide/transitions.html

0

0