Question

我有一个列表，我正在使用vue运行它。但是我想使用淡入淡出效果来改变它的价值。但它不适用于标签

以下是我使用v-if进行转换效果的示例，但它不适用于列表转换

new Vue({
el:'#test',
data:{
    counter:0,
    show:true,
    foo:['a','b','c']
}

})

https://jsfiddle.net/kv3s2y6z/2/

Answer 1

在具有相同标记名称的元素之间切换时，必须通过为其提供唯一的键属性来告诉Vue它们是不同的元素。否则，Vue的编译器将仅替换元素的内容以提高效率。即使在技术上不必要，但总是在组件中键入多个项目被认为是一种好习惯。

此外，转换必须在 out-in模式。

HTML：

[DynamicRoleAuthorize]
public ActionResult MyAction()
{

}

JS：

<div id="test">
  <transition name="fade" mode="out-in">
    <p :key="foo[counter]">
      {{ foo[counter] }}
    </p>
  </transition>
  <button @click="counter++">
    next
  </button>
  <button  @click="counter--">
    before
  </button>
</div>

段： https://jsfiddle.net/L4r64yxk/

淡化元素过渡

1 个答案: