Блог

Я создаю прототип веб-приложения, имеющего дело с множеством просмотров, которые находятся за пределами экрана, пока не будут активированы элементом, который в данный момент находится на экране. Пример:

 <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, чтобы найти соответствующее значение «data-target» для «data-view». Когда он находит совпадение, он переключает класс «текущий» между двумя представлениями.

В любом случае! Я надеюсь, что кто-нибудь поможет мне найти хороший способ применить мои анимации ввода и выхода к переключаемым элементам. Вот что я попробовал:

 $('[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');

    });
 

Это работает при первом щелчке, но при последующем щелчке, чтобы вернуться домой, анимация не выполняется правильно.

Я покопался, и случаи переключения выглядят как жизнеспособный вариант (?). Если у кого-нибудь есть рекомендации по лучшему подходу, это было бы очень ценно.

Не совсем уверен, как работает ваша настройка, но я предпочитаю использовать объект (в качестве интерфейса) для чего-то подобного:

  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'); для правильного переключения.