用于触发 3D 变换的 JQuery <html> 类答案

【问题标题】：JQuery <html> class to trigger 3D transforms用于触发 3D 变换的 JQuery <html> 类
【发布时间】：2012-12-15 08:26:33
【问题描述】：

我正在寻找一种很好的方法来提示 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'。

我有一个半工作的例子here。如果您检查 html 标记（单击 html 旁边的齿轮）并将 html 类从“show1”更改为“show2 zoom”，您将看到所需的过渡，它应该是立方体旋转到正确的一侧 (.show2) 以及顶部的花式过渡（.zoom）。除了我根本无法工作的 .js 之外，一切都正常工作！

新的演示here。

【问题讨论】：

您愿意稍微修改一下您的 HTML 吗？
当然，我可以解决它:)
我可以获得所有课程的列表吗？（我懒得看demo css）
如果您指的是我上面提到的“类系统”位，请将这些视为所有类的示例： 'menu1 p-show1 t-zoom' 'menu2 p-show2 t-spin-light ' 'menu3 p-show3 t-stutter' 'menu4 p-show4 t-flatten' 'menu5 p-show5 t-wander' 'menu6 p-show6 t-open'。 P代表位置，立方体的哪一面朝前，T代表过渡名称。我可以将这些添加到 HTML 中，它们可以被脚本拾取并注入到 html 标记中？
好的，过渡是在 3 秒后被移除的过渡？我花了几分钟才弄清楚这一切是如何运作的。再加上伏特加也无济于事。大声笑

标签： jquery html class css 3d

【解决方案1】：

Old CodePen Demo

附：我认为这些过渡很棒！

编辑：

代码更改以修复前 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;
}

Updated CodePen Demo

【讨论】：

我有演示 here。它做了我需要做的一切，谢谢！ :) 现在有一个错误，即在 3 秒内单击下一个项目不会触发“缩放”转换，但这是我的错，因为它们目前都设置为“缩放”，直到我进行更多转换。我有一个奇怪的问题-我无法单击 3-6 面，这与 js 无关，我认为这与 3d 旋转有关.. 有什么想法吗？新问题？
@daviestar 感谢您的反馈，我在回答中进行了一些代码更改以修复前 3 秒点击转换错误，如果它适合您，请告诉我。
我更新了演示here。谢谢，这工作得很好:) 现在我可以享受制作更多过渡和背景的乐趣了！不确定我是否应该将此作为我接受的答案，因为这两个脚本都运行良好并且各有利弊。您的解决方案在我的测试中更加稳定。
@daviestar 我喜欢“谢谢，这是完美的工作:)” - 祝你项目的其余部分好运。
@daviestar 您应该接受最有效的答案（在这种情况下是这个）。

【解决方案2】：

这是一个精简版：

$('.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 More Info 有关。

我希望这一切都会有所帮助。

【讨论】：

谢谢！出于某种原因，它对我不起作用-单击第二个菜单项时，正文类将更改为“menu2 show2”而不是“show2 zoom”。我应该编辑html吗？我仍然对点击问题感到困惑..我试过 :before 和 :after hacks 但没有骰子。 1 和 2 是正面和背面 - 这意味着当页面加载时它们在 2D 中仍然有 500px 的 x 和 y，但其他 4 个面在旋转之前是不可见的。我猜问题出在这个。
你确定上课吗？正如您所问的那样，它已应用于<HTML> 标签，“menu1 show1 zoom”（其他js也使用了“-webkit-”）。然后在应用 3 秒后移除效果类，在本例中为“缩放”。还是您不想也应用菜单类？
你可以看看here。抱歉，如果这是我造成的 n00b js 问题:)
最后两行是“肉”。 newclass = mc+' show'+i+' '+effect+' -webkit-'; mc+ 以取消菜单类。 trg.attr('class', newclass).delay(3000).removeClass(effect); delay(3000)，它等待 3 秒，然后继续删除效果类（如缩放）。不用道歉，我一开始是误会了。至于 CSS 动画，那不是我的强项。
它对你有用吗？它不适用于我的“缩放”或其他过渡名称 :( 修复了点击错误 - 添加透视图：5000px; 到 .cube_wrap。