:tada: Vue内置的组件transition
说有用也有用,说没用也可以完完全全不用的一个组件,但是个人觉得,动画这个东西,你只要稍稍微微配上一点点代码,就可以让整个项目起到画龙点睛的作用
demo使用了element-plus
简单做了一个淡入淡出的效果
<transition-group name="tag">
<el-tag v-for="(item, index) in $store.state.historyNavList" :key="index" class="tagWidth" closable @close="closeHandle(index)" effect="plain">{{ item.name }}</el-tag>
</transition-group>
.tag-enter-active{
opacity: 0;
transform: translateX(-80px);
}
.tag-enter-to{
opacity: 1;
transform: translateX(0px);