有关transition在2.0的变化

Question

由于vue2.0中transition变成了一个标签，而且样式的写法也发生了变化，我是这么写的

.cart-decrease

      display: inline-block

      padding: 6px

      font-size: 20px

      line-height: 20px

      color: rgb(0, 160, 220)

      transition: all 0.4s linear

      &.move-enter-active, &.move-leave-active

        opacity: 1

        transform: translate3D(0, 0, 0)

        .inner

          display: inline-block

          transition: all 0.4s linear

          transform: rotate(0)

      &.move-enter, &.move-leave-active

        opacity: 0

        transform: translate3D(24px, 0, 0)

        .inner

          transform: rotate(180deg)

然后通过transition标签包裹div和span ，但是总是出现加号在过渡过程中，向上蹦了一小段距离，过渡结束后，再蹦回来。。。。这是怎么回事？我花了好长时间解决不了！！

还有，老师，vue2.0的变化真的太坑了，您应该说明一下的，特别浪费时间！！！

Answer 1

Silva_0 2018-07-25 16:35:59

<transition name="move">
    <div class="cart-decrease icon-remove_circle_outline"
    @click="decreaseCart"  v-show="food.count>0">                      
    </div>
</transition> 


.move-enter-active, .move-leave-active
    transition all .4s linear                  
.move-enter, .move-leave-to
    opacity 0
    -webkit-transform translate3d(24px, 0, 0) rotate(180deg)
    transform  translate3d(24px, 0, 0)  rotate(180deg)

Answer 2

qq_牵着影子流浪在五维空间_0 2017-11-23 13:07:43

1.0到2.0升级确实改变了不少东西

Answer 3

ustbhuangyi 2017-06-04 15:00:37

13 章有1.0 升级到 2.0 的视频，建议你先去看看。同时可以去对比 2.0 的源码：https://github.com/ustbhuangyi/vue-sell

Answer 4

提问者 血色星期二 2017-06-04 13:42:17

还有一个问题，为什么我必须把font-size: 24px设置到div上，而不能设置到span上呢？如果设置到span上，而去掉div的font-size，那么减号在滚动到指定位置以后瞬间就会消失！！！