JQuery 类触发3D变换

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

 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
  

例如，如果单击“.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，我根本无法工作！

这里有新的演示。

Answer 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演示

Answer 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 更多信息 ::after 有关

我希望这一切都有帮助。