关于动画shopcart-list动画

Question

我使用vue2写的，将shopcart-list动画为

transition: all 0.5s

      &.fold-enter-active, &.fold-leave-active

        transform: translate3D(0, -100%, 0)

      &.fold-enter, &.fold-leave-active

        transform: translate3D(0, 0, 0)

为什么动画划上去又自己划下来了？？？？？？？

Answer 1

ustbhuangyi 2016-12-17 01:51:00

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

• 提问者 MythLQ #1

  我是用的2.0的方式写的，之前写的cartcontrol的动画可以，但是这个不行了

• ZZ辉 回复 提问者 MythLQ #2

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

Answer 2

tiyang 2017-01-12 17:52:03

我也遇到这个问题了，之前写的都可以，这个弹出来又滑下去了。

研究了好久，找到原因了：

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)

• ZZ辉 #1

  终于解决了，太谢谢了。