vue2.0 列表项移除过渡动画作用在最后一个元素的bug修复

见如下动图,列表移除动画过渡的效果作用在最后一个元素上,结合看了vue2.0官网,始终找不到原因!见如下

代码如下:

<div class="option-wrapper">
      <transition-group name="option-list" tag="ul">
        <li class="option-item" :key="index" v-for="(item,index) in voteSource">
          <span class="title">{{item.optionTitle}}</span>
          <span class="give-option">
            <input type="text" :placeholder="item.optionHolder" maxlength="100" v-model="item.optionValue"/>
          </span>
          <div class="remove" v-show="index>1" @click="removeOption(index)">
            <img src="./icon_delete.png"/>
          </div>
        </li>
      </transition-group>
    </div>

css部分(stylus语法)

.option-wrapper
    margin 30px 38px 0 38px
    .option-item
      position relative
      display flex
      margin-left 16px
      height 50px
      // margin-bottom 32px
      font-size 0
      .title
        flex 0 0 50px
        margin-right 5px
        display inline-block
        font-size 15px
        color #333333
      .give-option
        flex 1
        display inline-block
        height 14px
        font-size 15px
        input
          width 194px
          text-align center
          border 0
          border-bottom 1px solid #c4c4c4
          outline 0
          font-size 15px
          &::-webkit-input-placeholder
            color #cccccc
          &::-moz-placeholder
            color #cccccc
      .remove
        flex 0 0 25px
        position absolute
        top -5px
        right 5px
        img
          width 16px
          height 16px
      &.option-list-enter-active
        transition: all 0.8s
      &.option-list-leave-active
        // position absolute
        width 100%
        transition all 0.5s
      &.option-list-enter
        opacity: 0;
        transform: translateY(-30px)
      &.option-list-leave-to
        opacity: 0;
        transform: translateX(190px)

最后把官网的demo copy下来单独建立一个html页面测试,发现没有动图上的bug,最后对比发现是:key绑定的问题;

修改如下:

<li class="option-item" :key="item.uid" v-for="(item,index) in voteSource">

效果达到预期,心情愉悦!万事如意!

最后效果



  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值