Javascript 针对元素的内外动画

我正在制作一个web应用程序的原型，该应用程序处理大量屏幕外的视图，直到被当前屏幕上的元素激活。例如：

<div class='current' data-view='home'>
    <a href='#' data-target='menu'>View Menu</a>
</div>

<div data-view='menu'>
    <a href='#' data-target='home'>Go back home</a>
</div>

它在第一次单击时工作，但在随后单击返回主页时无法正确执行动画

---

我一直在四处挖掘，换箱子看起来是个可行的选择（？）。如果有人能提供更好方法的指导，我将不胜感激。

不太清楚您的设置是如何工作的，但我更喜欢使用对象（作为接口）来实现以下功能：

 function handleView( view ) {
    views = {
      home : function(){ /* Do stuff with view here */ },
      menu : function(){} 
      }

   views[view]()

}

 $('[data-target]').on('click', function (e) { 
    e.preventDefault()
    view = $(this).parent().data('view') /* This should return 'view name' */
    handleView( view );

 });

请记住，如果您要添加一个具有关联转换的类，您也需要删除它

---

所以

targetView.addClass（'moveFromTop'）需要
targetView.removeClass（'moveFromTop'）以便正确切换。
请稍候，您希望在单击视图时为其设置动画。从最基本的角度看，对吧？有点！更严格地说，我需要动画在点击事件的每种情况下都有用例。例如，如果一个视图有两个针对不同视图的按钮，例如：按钮a可能会告诉当前视图向右退出，而新视图从左进入。按钮B可以告诉当前视图从顶部退出，新视图从底部进入。在这种情况下，我将使用CSS3和transform处理所有动画。我现在没有时间写出来。但这会给你一个巨大的性能吹嘘。如果没有人给我一个像样的答案，我明天会添加一些东西嘿，杰米，所有的动画都是用CSS完成的——这只是我需要的类切换。这看起来很奇怪，因为我根本不知道在jquery方面我在做什么。：）你所做的看起来很有趣！大部分情况下我都能理解，我只是不熟悉jquery为更复杂的东西提供的所有技巧。将函数分解成更小的块通常有助于我保持一切井然有序。试试上面的方法。
 function handleView( view ) {
    views = {
      home : function(){ /* Do stuff with view here */ },
      menu : function(){} 
      }

   views[view]()

}

 $('[data-target]').on('click', function (e) { 
    e.preventDefault()
    view = $(this).parent().data('view') /* This should return 'view name' */
    handleView( view );

 });