CSS3 transition cannot repeat

问题

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;
}

回答1:

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.)

回答2:

You can't transition between display: none; and display: block; with CSS transitions.

I'm not sure about the effect you want to achieve, but changing...

#place .hide{
    opacity: 0;
}

Will help you understand what is going on.

If you want to set display: none after the transition completes you can add a bit of javascript:

// webkitTransitionEnd: Opera and Chrome
// transitionend: Firefox and IE 10
// otransitionend: Opera  >= 12
// oTransitionEnd: Opera  <  12
// http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

$('#place .hide').on('transitionend otransitionend oTransitionEnd webkitTransitionEnd', function(){
  $(this).hide()
})

来源：https://stackoverflow.com/questions/12277380/css3-transition-cannot-repeat

标签

javascript

html

css3

css-transitions