简单实用的vue自定义tab介绍

当你在transition上添加指定的name时，Vue在进入/离开的transition中会有6个类开关，分别是：name-enter,name-enter-active,name-enter-to,name-leave,name-leave-active,name-leave-to如图：v-enter：定义start进入转换状态。元素插入前生效，元素插入后下一帧移除。v-enter-active：定义进入转换激活时的状态。在整个进入过渡阶段应用，在插入元素之前应用，并在过渡/动画完成后移除。此类可用于将处理时间、延迟和曲线函数定义为转换。v-enter-to：2.1.8及以上版本定义了enter过渡的结束状态。在插入元素后应用下一帧（同时移除v-enter），在过渡/动画完成后移除。v-leave：定义离开转换的开始状态。退出转换被触发后，它会立即在下一帧被删除。v-leave-active：定义离开转换激活时的状态。在整个退出过渡阶段应用，在触发退出过渡时立即应用，并在过渡/动画完成后移除。此类可用于定义离开转换的处理时间、延迟和曲线函数。v-leave-to：2.1.8及以上版本定义离开过渡的结束状态。在离开过渡被触发后应用下一帧（同时v-leave被移除），在过渡/动画完成后被移除。所以如果我们要实现tab切换动画，只需要在transition1中为我们每个单独的tab页添加子组件即可。使用ul（无序列表）在tab上方创建导航{{item.desc}}/ul>Definitionindatadata(){return{currentTabComponent:'tab1',//tab页默认显示第一个itemtabIndex:0,transitionName:''//tab按照既定格式定义tabs:[{id:'tab1',desc:'主页'},{id:'tab2',desc:'联系我们'},{id:'tab3',desc:'与我相关'}]}},设置li水平布局，我创建的时候是把各个导航名称放到data里面，用v-for做一个循环2.具体设置各个tab页