Нацеливание на анимацию входа и выхода на элементах

#javascript #jquery #css #animation

#javascript #jquery #css #Анимация

Вопрос:

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

 <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');

    });
 

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

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

Комментарии:

1. Итак, подождите, вы хотите анимировать представление при нажатии на него. В самом базовом представлении, верно?

2. Вроде того! Более технически мне нужно, чтобы анимация имела варианты использования для каждой ситуации события щелчка. В качестве примера — если в представлении есть две кнопки, предназначенные для разных представлений, например: Кнопка A может указывать текущему представлению выйти вправо, а новому представлению войти слева. Кнопка B может указывать на выход текущего представления сверху, а новое представление — снизу.

3. В этом случае я бы обработал все анимации с помощью CSS3 и transform. У меня нет времени писать это прямо сейчас. Но это дало бы вам огромную производительность. Я добавлю что-нибудь завтра, если никто другой не дал достойного ответа

4. Эй, Джейми, все анимации выполнены в CSS — это просто переключение классов, которое мне нужно.

Ответ №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. Это выглядит странно, потому что я в принципе понятия не имею, что я делаю, когда дело доходит до jquery. 🙂 То, что вы сделали, выглядит интересно! Я могу понять это по большей части, я просто не знаком со всеми приемами, которые jquery может предложить для более сложных вещей.

2. Разбиение функций на более мелкие фрагменты обычно помогает мне все организовать. Попробуйте что-то вроде описанного выше.