简易实践的vue自定义tab入门

JackJiang 发布于2019-08-29 17:31 / 3221人阅读

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。

本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡 章节链接描述

要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

vue官方文档中有这样一个例子


  
  
    hello

当你在transition上添加指定的name后，vue在进入/离开的过渡中，会有 6 个 class 切换，分别为：
name-enter、name-enter-active、name-enter-to、name-leave、name-leave-active、name-leave-to

如图所示：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除)，在过渡/动画完成之后移除。

所以我们要想实现tab切换动画，只需要在transition中添加我们每个多带带tab页的子组件

1.用ul（无序列表）创建tab上方导航


    {{item.desc}}

data中的定义

data () {
    return {
      currentTabComponent: "tab1",
      // tab页默认显示第一项
      tabIndex: 0,
      transitionName: ""
      // tab根据既定格式定义
      tabs: [
        {
          id: "tab1",
          desc: "首页"
        },
        {
          id: "tab2",
          desc: "联系我们"
        },
        {
          id: "tab3",
          desc: "与我相关"
        }
      ]
    }
},

设置li横向排布，我创建的时候是把每个导航名称放在data里，用v-for做循环

2.具体设置每个tab页

组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装可重用的代码。我们用is特性来扩展，从而达到可以在这些受限制的html元素中使用。is会将currentTabComponent的值转换成指定的组件形式：
如果currentTabComponent为my-component

转化后为：

在tab导航点击时修改tabIndex，此时监听tabIndex的变化，当目的值>原始值，向右滑动，反之向左滑动

tabIndex (to, from) {
  let that = this;
  that.transitionName = (to > from) ? "forward" : "backward";
}

设置vue动画六个状态的class的效果，此项目中因为存在两种滑动状态，所以有12个class

.forward-enter-active,.forward-leave-active{
  transition: 0.5s all ease;
  transform: translateX(0);
}
.forward-enter{
    transform: translateX(100%);
}
.forward-enter-to{
    transform: translateX(0);
}
.forward-leave {
    transform: translate3d(0, 0, 0);
}
.forward-leave-to {
    transform: translate3d(-100%, 0, 0);
}
.backward-enter-active, .backward-leave-active {
  transition: all 0.5s;
}
.backward-leave {
  transform: translate3d(0, 0, 0);
}
.backward-leave-to {
  transform: translate3d(100%, 0, 0);
}
.backward-enter {
  transform: translate3d(-100%, 0, 0);
}
.backward-enter-to {
  transform: translate3d(0, 0, 0);
}

遇到问题：
在两个tab页相互切换时，当前div没被移走，将会导致下一个将会一直存在于当前div消失才一上来，所以我用了position：absolute，使每个div都飘在上面，但是遇到的问题是最外层的盒子不能随内层单个tab页高度变化，所以我用了js动态把tab页高度赋值给外层div，目前还没想到更好的方案。

最后我封装了一下组件，使用时只需要传入tab的标题数组和多带带的tab页即可使用

⚠️：github地址可查看代码github

专线服务私有云 ecs自定义镜像操作实践 vue20开发实践自定义镜像的使用请教自定义控件的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114377.html

简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Benedict Evans 2019-08-23 13:55 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Cc_2011 2019-08-02 12:12 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0