0

我正在寻找一种很好的方法来提示 css3 3d 转换，方法是使用 JQuery 向 html 标记添加类。我有一个这样的菜单：

<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 标记中。'show2' 如果单击 '.menu2 a' 等。

然而，为了让我的转换正常工作，我还需要添加另一个类，然后在 3 秒等设定时间后删除。因此，如果单击“.menu1 a”，则 html 类将“show1 zoom”持续 3 秒，然后只是“show1”。如果单击“.menu2 a”，则 html 类将是“show2 twirl”。

我不介意在脚本中手动设置转换的名称（缩放、旋转等），但如果它更容易/更整洁，我可以在 li 上使用类系统，例如 'menu1 p-show1 t-zoom '。

我在这里有一个半成品的例子。如果您检查 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 回答