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

最新推荐文章于 2019-11-05 17:23:02 发布

babulongbo

最新推荐文章于 2019-11-05 17:23:02 发布

阅读量1.3k

点赞数 1

分类专栏：程序员笔记 web开发笔记文章标签： tab切换 slideToggle 原生js

本文链接：https://blog.csdn.net/babulongbo/article/details/87885344

版权

**问题描述：**当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;
        co

最低0.47元/天解锁文章

babulongbo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用原生实现tab切换+slideToggle效果

**问题描述：**当tab切换时，由于tab对应的内容不同，导致内容容器的高度的不同。直接的切换显示内容显得太僵硬了，所以希望内容容器根据内容的多少实现slideToggle效果。**解析问题：**首先一点是使用原生，意味着不能使用第三方框架。而实现slideToggle动画效果主要有两种手段，一种是使用css3动画，另一种是javascript使用定时器实现slideToggle效果。但是...
复制链接

扫一扫