0

JQueryを使用してhtmlタグにクラスを追加することにより、css3 3d変換をキューに入れるための優れた方法を探しています。次のようなメニューがあります。

<ul>
    <li class="menu1"><a href="#">Item 1</a></li>
    <li class="menu2"><a href="#">Item 2</a></li>
    <li class="menu3"><a href="#">Item 3</a></li>
    <li class="menu4"><a href="#">Item 4</a></li>
    <li class="menu5"><a href="#">Item 5</a></li>
    <li class="menu6"><a href="#">Item 6</a></li>
</ul>

たとえば、「.menu1 a」をクリックした場合、クラス「show1」を html タグに追加したいと思います。「.menu2 a」がクリックされた場合は「show2」など

ただし、トランジションが正しく機能するためには、別のクラスを追加して、3 秒などの設定時間後に削除する必要もあります。したがって、'.menu1 a' をクリックすると、html クラスは 3 秒間 'show1 zoom' になり、その後は 'show1' になります。そして、'.menu2 a' をクリックすると、html クラスは例えば 'show2 twirl' になります。

トランジションの名前 (zoom、twirl など) をスクリプトで手動で設定してもかまいませんが、それがより簡単で適切な場合は、'menu1 p-show1 t-zoom のように、li でクラスのシステムを使用できます。 '。

私はここに半分働いている例を持っています。html タグを調べて (html の横にある歯車をクリック)、html クラスを「show1」から「show2 zoom」に変更すると、目的のトランジションが表示されます。これは、立方体が正しい側 (.show2) に回転している必要があります。ファンシー トランジション (.zoom) を上に表示します。まったく動作しない.jsを除いて、すべてが正しく動作しています!

新しいデモはこちら.

4

2 に答える 2

1

古い CodePen のデモ

PS これらのトランジションは素晴らしいと思います!

編集：

3 秒前のクリック遷移のバグを修正するためのコードの変更:

var currentShow, currentTransition, currentTimeout;

$('.menu ul li a').click(function() {
    var $this = $(this);
    var $li = $this.closest('li');
    var index = $li.attr('class').replace(/menu/, '');
    var $html = $li.closest('html');

    $html.removeClass(currentShow);

    if (currentTransition) {
        $html.removeClass(currentTransition);
        clearTimeout(currentTimeout);
        setTimeout(function () {
            DoTransition(index, $html); 
        },50);
    } else {
        DoTransition(index, $html); 
    }

});

function DoTransition(index, $html) {
    currentShow = 'show'.concat(index);
    currentTransition = GetTransitionString(index);

    $html.addClass(currentShow + ' ' + currentTransition);

    currentTimeout = setTimeout(function() {
        $html.removeClass(currentTransition);
        currentTransition = null;
    }, 3000);
}

function GetTransitionString(index) {
    var transition;

    switch (parseInt(index)) {
        case 1:
            transition = 'zoom';
            break;
        case 2:
            transition = 'zoom';
            break;
        case 3:
            transition = 'zoom';
            break;
        case 4:
            transition = 'zoom';
            break;
        case 5:
            transition = 'zoom';
            break;
        case 6:
            transition = 'zoom';
            break;
    }

    return transition;
}

更新された CodePen デモ

于 2012-12-15T08:50:33.470 に答える
0

これが要約版です：

$('.menu ul li a').click(function() {
    var i = $(this).parent('li').index() + 1, 
       mc = $(this).parent('li').attr('class'),
      trg = $(this).closest('html'),
       cc = trg.attr('class'),
       newclass;
       switch (i) {
           case 1: var effect = 'zoom';
               break;
           case 2: var effect = 'spin-light';
               break;
           case 3: var effect = 'stutter';
               break;
           case 4: var effect = 'flatten';
               break;
           case 5: var effect = 'wander';
               break;
           case 6: var effect = 'open';
               break;                               
       }
      newclass = mc+' show'+i+' '+effect+' -webkit-';
      trg.attr('class', newclass).delay(3000).queue(function(){$(this).removeClass(effect);$(this).dequeue();}); 
});

私はCSSアニメーションの問題について長い間研究していました。サイド1と2のみがクリック可能なメニューを持っています。何らかの理由で、他の側が問題を抱えています。要素を右クリックして検査すると、キューブラッパーに移動します。私が行った調査から、それはと関係があると推測してい::beforeます::after 。

これがすべてお役に立てば幸いです。

于 2012-12-15T14:40:03.290 に答える