Home/ Questions/Q 8484429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:22:43+00:00

The transition effect run only once onload, but not work when clicking another tab.

  • 0

The transition effect run only once onload, but not work when clicking another tab.
How to make it run when changing tabs every times?

When the navigation button is clicked, the content should be show up with the transition effects.
HTML:

<body onload="setCurrent('home','home_content')">
<div id="wrap" class="center">
    <div class="top">
        <header class="left">
            <h1><a href="#">transition</a></h1>
        </header>
    </div>
    <div class="right">
        <nav class="menu">
            <ul>
                <li><a class="" id="home" onclick="setCurrent('home','home_content')">Home</a></li>
                <li><a class="" id="about" onclick="setCurrent('about','about_content')">About</a></li>
            </ul>
        </nav>
    </div>
    <div id="main">
        <div id="place">
            <div id="home_content" class="content">
                <h3>Home</h3>
            </div>
            <div id="about_content" class="content">
                <h3>About</h3>
            </div>
        </div>
    </div>
</div>

CSS:

#place .content{
    height: 1px;
    padding: 20px;
    margin: 0;
    overflow: hidden;
    transition:all 2s ease;
    -moz-transition:all 2s ease; /* Firefox 4 */
    -webkit-transition:all 2s ease; /* Safari and Chrome */
    -o-transition:all 2s ease; /* Opera */
    -ms-transition:all 2s ease; /* MS */
}
#place .hide{
    display:none;
}

#place .expand{
    display:block;
    height:500px;
    background-color:#f00;
}

JS:

function setCurrent(current,currentContent){
    document.getElementById('home').className = 'none';
    document.getElementById('about').className = 'none';

    document.getElementById('home_content').classList.remove('expand');
    document.getElementById('about_content').classList.remove('expand');

    document.getElementById('home_content').classList.add('hide');
    document.getElementById('about_content').classList.add('hide');

    document.getElementById(current).className='current';
    document.getElementById(currentContent).classList.remove('hide');
    document.getElementById(currentContent).classList.add('expand');
    return;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you cannot animate display: none properly, I would suggest a solution like this:

    http://jsfiddle.net/VgLEG/5/

    As you can see there are a few changes:

    There souldn’t be a hidden class. You want every content to be hidden by default. This way there will be less inconsistencies later on.

    instead of display none, I suggest 

    #place .content{
    height: 0;
    padding: 0 20px;
    opacity: 0;
}

#place .content.expand{
    height:500px;
    padding: 20px;
    opacity: 1;
    background-color:#f00;
}

    This way the browser knows what to animate: It will fade (opacity), it will slide up/down (height), and also animate the padding too as it adds to the elements width.

    (This would be easier with jquery, and would also work in IE8 and other older browsers not supporting css animations.)

    • 0