使用原生实现tab切换+slideToggle效果

**问题描述：**当tab切换时，由于tab对应的内容不同，导致内容容器的高度的不同。直接的切换显示内容显得太僵硬了，所以希望内容容器根据内容的多少实现slideToggle效果。
**解析问题：**首先一点是使用原生，意味着不能使用第三方框架。而实现slideToggle动画效果主要有两种手段，一种是使用css3动画，另一种是javascript使用定时器实现slideToggle效果。但是使用原生js实现很繁琐，还是使用css3的方式推荐。使用css3动画的transition属性来完成这效果，但是要注意的是使用transition的话，元素不能使用display: none;和display: block/flex/…;等进行切换。
我的实现方案是将sildeToggle动画和内容切换分离，在原来内容切换基础上，给外部容器添加transition动画；这样的话不论里面内容如何切花显示，只需要根据内容给容器设置高度，而容器作为视口，对超过的内容进行隐藏，而高度的改变触发了transition属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>tab</title><style>* {padding: 0;margin: 0;}#container {transition: height 0.3s linear;background-color: cadetblue;overflow: hidden;}.nav-list {display: flex;flex-wrap: nowrap;}.tab {padding: 0 15px;height: 40px;line-height: 40px;text-align: center;display: inline-flex;justify-content: center;align-content: center;align-items: center;background-color: darkcyan;color: orange;}.tab.active {background-color: orange;color: darkcyan;}.content {display: none;}.content p {color: gold;}.content.active {display: block;}</style>
</head>
<body><dl id="tab"><dd id="nav"><dl class="nav-list"><dd class="tab active" data-index="0">tab1</dd><dd class="tab" data-index="1">tab2</dd><dd class="tab" data-index="2">tab3</dd><dd class="tab" data-index="3">tab4</dd><dd class="tab" data-index="4">tab5</dd></dl></dd><dd id="container"><dl class="content-list"><dd class="content active"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></dd><dd class="content"><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p></dd><dd class="content"><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p><p>3</p></dd><dd class="content"><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p><p>4</p></dd><dd class="content"><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p><p>5</p></dd></dl></dd></dl><script type="text/javascript">'use strict';function load () {const navList = document.querySelector('#nav .nav-list')const contentList = document.querySelector('#container .content-list')const container = document.querySelector('#container')const tabs = document.querySelectorAll('#nav .tab')const contents = document.querySelectorAll('#container .content')let activeIndex = 0container.style.height = contentList.offsetHeight + 'px'navList.addEventListener('click', function (e) {const el = e.target || e.srcElementif (el.classList && el.classList.contains('tab')) {const currIndex = parseInt(el.getAttribute('data-index'))if (tabs[activeIndex].classList.contains('active')) {tabs[activeIndex].classList.remove('active')}if (contents[activeIndex].classList.contains('active')) {contents[activeIndex].classList.remove('active')}if (!tabs[currIndex].classList.contains('active')) {tabs[currIndex].classList.add('active')}if (!contents[currIndex].classList.contains('active')) {contents[currIndex].classList.add('active')container.style.height = contentList.offsetHeight + 'px'}activeIndex = currIndex}}, false)}window.addEventListener('load', function () {load()}, true)</script>
</body>
</html>

使用原生实现tab切换+slideToggle效果相关推荐

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
使用jq实现tab切换
使用jq实现tab切换,效果如下完整代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
小程序tab切换效果
小程序实现tab切换很简单,只需要完成两部分. 1.页面 2.js触发时间先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swipe ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...

使用原生实现tab切换+slideToggle效果

使用原生实现tab切换+slideToggle效果相关推荐

最新文章

热门文章