Wie grünsock timeline max basierend auf einem Datenattribut zu spielen

Question

Derzeit bekomme ich keine Antwort auf dem Grünsock Forum. Ich habe eine Suchleiste, die durch Klicken auf ein Symbol erweitert und wieder geschlossen werden soll, wenn Sie irgendwo auf den Körper klicken, aber nur, wenn die Suchleiste erweitert ist.

Wenn ich öffne die searchbar ich zwei Probleme für die Schließung Animation bin vor:

(1) Die Abschluss Animation resetted wird, wenn ich auf dem Körperelement klicken, während das Schließen Animation läuft.

(2) Die schließende Animation wird ausgeführt, auch wenn die Suchleiste nicht erweitert wird.

Ich habe versucht, diese Probleme zu lösen, indem Sie dem Container für die verschiedenen Zustände ein Datenattribut hinzufügen (offen, wahr/falsch), aber irgendwie funktioniert es nicht wie vorgesehen. Gibt es einen logischen Fehler in meinem Code?

(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 die Probleme zu veranschaulichen: https://codepen.io/anon/pen/YQqQWm

Answer 1

ich ein paar Dinge geändert haben und hoffen, dass das ist, was Sie suchen.

Der Hauptunterschied ist, dass wir jetzt unsere Ereignisse mit .one(...) statt .on(...) binden. Das bedeutet, dass das Ereignis nur einmal ausgeführt und dann zerstört wird und wir nicht den Status verfolgen müssen.

Wenn die Website lädt, binden wir $irpsearchinput.one('focus', ...). Das Ereignis wird ausgeführt, wenn der Fokus auf input liegt. openSearch

Innerhalb der Funktion wir binden $ripsearchinput.one('blur', ...) (ausgeführt, wenn der input Fokus verliert) und innerhalb der Funktion closeSearch wir wieder $irpsearchinput.one('focus', ...) binden.

Schließlich stellen wir sicher, dass, wenn Sie drücken ESC die input Fokus verliert (und löst damit die blur -Bindung.

hier ein fork des Stiftes ist.