1

トランジション効果はロード時に一度だけ実行されますが、別のタブをクリックすると機能しません。毎回タブを変更するときに実行する方法は?

ナビゲーション ボタンをクリックすると、トランジション効果とともにコンテンツが表示されます。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;
}
4

2 に答える 2

0

display: none;CSS トランジションの間で、およびCSS トランジションを使用してトランジションすることはできませんdisplay: block;。

達成したい効果についてはよくわかりませんが、変更する...

#place .hide{
    opacity: 0;
}

何が起こっているのかを理解するのに役立ちます。

移行が完了した後に設定したい場合display: noneは、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()
})
于 2012-09-05T08:55:32.593 に答える
0

display: none を適切にアニメーション化できないため、次のような解決策をお勧めします。

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

ご覧のとおり、いくつかの変更があります。

非表示のクラスがあってはなりません。すべてのコンテンツをデフォルトで非表示にする必要があります。このようにして、後で矛盾が少なくなります。

何も表示しない代わりに、私はお勧めします

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

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

このようにして、ブラウザーは何をアニメーション化するかを認識します: フェード (不透明度) し、上下にスライド (高さ) し、要素の幅に追加されるパディングもアニメーション化します。

(これは jquery を使用すると簡単になり、CSS アニメーションをサポートしていない IE8 やその他の古いブラウザーでも機能します。)

于 2012-09-05T09:31:32.890 に答える