Comment lire greensock timeline max basé sur un attribut de données

Question

Actuellement, je ne reçois pas de réponse au forum de greensock. J'ai une barre de recherche, qui devrait se développer en cliquant sur une icône et refermer, en cliquant n'importe où sur le corps, mais seulement, lorsque la barre de recherche est développée.

Quand j'ouvre la barre de recherche, je suis confronté à deux problèmes pour l'animation de clôture:

(1) L'animation de fermeture est remis à zéro lorsque je clique sur l'élément du corps tandis que l'animation de fermeture est en cours d'exécution. (2) L'animation de fermeture s'exécute, même si la barre de recherche n'est pas développée.

J'ai essayé de résoudre ce problème en ajoutant un attribut de données au conteneur pour les différents états (ouvert, vrai/faux) mais de toute façon cela ne fonctionne pas comme prévu. Y a-t-il une erreur de logique dans mon 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 pour illustrer les problèmes: https://codepen.io/anon/pen/YQqQWm

Answer 1

J'ai changé quelques petites choses et espère que c'est ce que vous cherchez.

La principale différence est que nous lions maintenant nos événements avec .one(...) au lieu de .on(...). Cela signifie que l'événement ne sera exécuté qu'une seule fois puis détruit et que nous n'aurons plus besoin de suivre l'état. Lorsque le site charge, nous lions $irpsearchinput.one('focus', ...)

L'événement sera exécuté lorsque le input obtiendra le focus.

Dans la fonction openSearch nous lient $ripsearchinput.one('blur', ...) (exécuté lorsque le input perd le focus) et à l'intérieur de la fonction closeSearch nous lier à nouveau $irpsearchinput.one('focus', ...).

Enfin nous nous assurons que lorsque vous appuyez sur ESC le input perd le focus (et déclenche ainsi la blur liaison d'.

Voici un fork de votre stylo.