Vue.js 多元素切换过渡效果要加 key

例子:

<transition name="fade" mode="out-in">  
 <button v-if="isEditing" key="save">  
 Save  
 </button>  
 <button v-else key="edit">  
 Edit  
 </button>  
</transition>
.fade-enter-active, .fade-leave-active {
  transition: opacity .25s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

这里的 <button> 如果没有设置 key 特性,是不会有过渡效果出现的。因为针对相同标签元素的切换,Vue 为了效率,默认会直接切换,不使用过渡效果。

评论数量: 0

0
点赞
177
浏览
0
评论

贡献 16