transition在vue1.0和vue2.0中的区别

transition在vue1.0和vue2.0中的区别

1. html部分：

vue1.0

<div class="shopcart-list" v-show="listShow" transition="fold">
	<!--more code-->
</div>

vue2.0

 <transition name="fold">
      <div class="shopcart-list" v-show="listShow">
      	<!--more code-->
      </div>
 </transition>

2. css部分

vue1.0

.shopcart-list
      position: absolute
      left: 0
      top: 0
      z-index: -1
      width: 100%
      &.fold-transition
        transition: all 0.5s
        transform: translate3d(0, -100%, 0)
      &.fold-enter, &.fold-leave
        transform: translate3d(0, 0, 0)

vue2.0

.shopcart-list
      position absolute
      top: 0
      left: 0
      z-index -1
      width: 100%
      // transition all 0.5s
      transform translate3d(0, -100%, 0)

      &.fold-enter-active
      &.fold-leave-active
        transition all 0.5s
        // transform translate3d(0, -100%, 0)

      &.fold-enter
      &.fold-leave-to
        transform translate3d(0, 0, 0)