Как воспроизвести максимальную шкалу времени Гринсока на основе атрибута данных

Question

В настоящее время я не получаю ответ на форуме Гринсок. У меня есть панель поиска, которая должна расширяться, если щелкнуть значок, и снова закрыться при щелчке в любом месте тела, но только при расширении панели поиска.

Когда я открываю панель поиска, я сталкиваюсь с двумя проблемами для анимации закрытия:

(1) Закрывающая анимация сбрасывается, когда я щелкаю по элементу тела во время запуска закрывающей анимации.

(2) Закрывающая анимация запускается, даже если панель поиска не развернута.

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

(function($) {

var $irpsearch = $('#irp-newssearch-container'),
    $irpsearchinput = $('#irp-searchform-input'),
    $search_icon = $('.irp-news-search-icon'),
    $btn_container = $('.irp-filter-buttons'),
    $filter_btn = $('.filter-btn'),
    $search_seperator = $('.irp-search-seperator')
    $body = $('body');

    var openSearchAnimation = new TimelineMax({
            paused: true
        })
        openSearchAnimation
            .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1)
            .set($btn_container,{'display': 'none'})
            .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6')
            .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0')
            .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1');

    openSearch = function () {
        $irpsearch.data('open', true);
        openSearchAnimation.play();
        $irpsearchinput.focus();
        return false;
    },
    closeSearch = function() {
        $irpsearch.data('open', false);
        openSearchAnimation.reverse(0);
    }

/*$irpsearchinput.on('click', function(e) {
    e.stopPropagation();
    });*/

$irpsearch.on('click', function(e) {
    e.stopPropagation();
    if (!$irpsearch.data('open')) {

        openSearch();

        /* HTML Click */
        $body.off('click').on('click', function(e) {
            closeSearch();
        });

        /* Escape Hide */
        $( document ).on( 'keydown', function ( e ) {
            if ( e.keyCode === 27 ) { // ESC
                closeSearch();
            }
        });


    } else {
        if ($irpsearchinput.val() === '') {
            closeSearch();
            return false;
        }
    }
});

})(jQuery)

Codepen, чтобы проиллюстрировать проблемы: https://codepen.io/anon/pen/YQqQWm

Answer 1

Я изменил несколько вещей и надеюсь, что это то, что вы ищете.

Основное отличие состоит в том, что мы теперь связываем наши события с .one(...) вместо .on(...), Это означает, что событие будет выполнено только один раз, а затем уничтожено, и нам не нужно отслеживать состояние.

Когда сайт загружается, мы связываем $irpsearchinput.one('focus', ...), Событие будет выполнено, когда input получает фокус.

Внутри функции openSearch мы связываем $ripsearchinput.one('blur', ...) (выполняется, когда input теряет фокус) и внутри функции closeSearch мы снова связываем $irpsearchinput.one('focus', ...),

Наконец, мы уверены, что когда вы нажимаете ESC input теряет фокус (и тем самым вызывает blur-связывающий.

Вот вилка вашей ручки.