2回答

ustbhuangyi

2016-12-17

建议去看看 Vue.js 2.0 过渡的文档，和 1.0 的过渡实现略不一样，注意 transition 的设置时机~

0

2

ZZ辉

回复

MythLQ

请问解决了吗，我也遇到相同的问题

2016-12-27

共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)

2

1

ZZ辉

终于解决了，太谢谢了。

2017-01-20

共1条回复