Question

我正在构建一个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>

现在我已经装配了jQuery来找到＆＃34; data-target＆＃34;的匹配值。到＆＃34;数据视图＆＃34;。当它找到匹配时，它会切换班级＆＃34;当前＆＃34;在两种观点之间。

反正！我希望有人可以帮我找出一个很好的方法来将我的进入和退出动画应用到切换元素。这就是我的尝试：

$('[data-target]').on('click', function () {

    var parentView =    $(this).parents('[data-view]'),
        currentView =   $('.current');

    function finishedAnimation() {
        currentView.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function() { currentView.removeClass(); });
        };

    if (parentView.data('view', 'home')) {
        targetView.addClass('moveFromTop');
        currentView.addClass('moveToBottom');
        finishedAnimation();
        }

    else if (parentView.data('view', 'menu')) {
        targetView.addClass('moveFromBottom');
        currentView.addClass('moveToTop');
        finishedAnimation();
        }

    $(this).parents('body').find('[data-view=' + $(this).data('target') + ']').addClass('current');

    });

它适用于第一次单击，但在随后单击以返回主页时，它无法正确执行动画。

我一直在挖掘并转换案例看起来像一个可行的选项（？）。如果有人对更好的方法有指导，我们将不胜感激。

Answer 1

不完全确定您的设置是如何工作的，但我更喜欢使用对象（作为接口）来实现这样的目标：

 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');才能正确切换。

针对元素的进出动画

1 个答案: