见如下动图,列表移除动画过渡的效果作用在最后一个元素上,结合看了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">
效果达到预期,心情愉悦!万事如意!
最后效果