Learn html, css, javascript online and how to make a webpage design

How to build Animated CSS tab and line tab running ?

Sunday 10th of January 2021 04:27:00 PMCSSHTMLTabVueJS

When you build web applications, you will sometimes get asked to build tab functions so that they are beautiful, smooth and the users feel happy. Today we are going to use VueJS with Watch and CSS transition to animate between tabs.

 

Create tab content with HTML and fill in data with v-for

<div id="app">
    <div class="box">
        <div class="title">Animated CSS tab and line tab running</div>
        <div class="tab-nav">
            <template v-for="(item, index) in data">
                <a @click.stop.prevent="active=index" class='nav-item' :class="active==index ? 'active' : ''">{{ item }}</a>
            </template>
            <div class="line" ref="line"></div>
        </div>
        <p>Click the tab item to see the animation</p>
    </div>
</div>

 

Create CSS for tabs

You pay attention where declaring the transition property for the line object is guaranteed to have the effect of running when changing tabs

<style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box .tab-nav{display: flex;position: relative;}
        .box .tab-nav a.nav-item{display:flex;height: 50px;align-items: center;justify-content: center;padding: 0px 10px;text-decoration: none;cursor: pointer;min-width: 50px;}
        .box .tab-nav a.nav-item.active{color:#9f77e8;font-weight: bold;}
        .box .tab-nav .line{position: absolute;bottom:-2px;height: 2px;background: #9f77e8;left: 0px;transition: all 0.2s;-webkit-transition: all 0.2s;}
    </style>

 

We'll listen as the tab changes and animate for the tab-running line object that is active.

The entire source code is as below:

<!DOCTYPE html>
<html>
<head>
    <title>How to build Animated CSS tab and line tab running ? - HtmlcssDownload.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box .tab-nav{display: flex;position: relative;}
        .box .tab-nav a.nav-item{display:flex;height: 50px;align-items: center;justify-content: center;padding: 0px 10px;text-decoration: none;cursor: pointer;min-width: 50px;}
        .box .tab-nav a.nav-item.active{color:#9f77e8;font-weight: bold;}
        .box .tab-nav .line{position: absolute;bottom:-2px;height: 2px;background: #9f77e8;left: 0px;transition: all 0.2s;-webkit-transition: all 0.2s;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">Animated CSS tab and line tab running</div>
        <div class="tab-nav">
            <template v-for="(item, index) in data">
                <a @click.stop.prevent="active=index" class='nav-item' :class="active==index ? 'active' : ''">{{ item }}</a>
            </template>
            <div class="line" ref="line"></div>
        </div>
        <p>Click the tab item to see the animation</p>
    </div>
</div>
   
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            data: ["HTML","CSS","Javascript","Python","PHP","Java"],
            active: -1
        },
        mounted: function(){
            this.active = 0;
        },
        watch: {
            active: function(newval){
                let nav = document.getElementsByClassName('nav-item');
                this.$refs.line.style.cssText = `transform:translate(${nav[newval].offsetLeft}px,0px);width:${nav[newval].offsetWidth}px`;
            }
        }
    })
    
</script>
    
</body>
</html>

 

Result for example

We are Recommending you: