https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions
我想要实现的是一种过渡组动画,类似于上面链接中所示的动画-一种在删除或添加数组元素时移动整个列表的动画。
此动画适用于使用v-for渲染的输入字段的列表。
但是突然间,当我在输入字段中添加v-validate时,从列表中删除一个输入字段时,移动动画不起作用-该字段消失了。
这是我的代码:
<transition-group name="interval-list" tag="div">
<div v-for="(interval, index) in interval" v-bind:key="interval.id" class="interval-list-item row">
<div class="col-sm-10 col-xs-9">
<div class="input-group">
<span class="input-group-addon">
{{index + 1}}.
</span>
<input v-validate="{required: true, max: 50}"
v-bind:key="interval.id"
type="text" class="form-control"
v-bind:value="interval.name"
v-on:input="updateSingleIntervalName(index, $event)">
</div>
<div>
<div class="error">
{{errors.first('intervals'+interval.id)}}
</div>
</div>
</div>
</div>
</transition-group>
请注意,字段验证没有问题-错误按预期工作。 vee-validate会以某种方式干扰v-move动画-任何想法可能导致此问题的原因?