如何根据数据属性播放greensock timeline max

Question

目前我在 greensock 论坛上没有得到答案。我有一个搜索栏，当点击 body 的任何地方时，它应该通过点击一个图标展开并再次关闭，但仅当搜索栏展开时。

当我打开搜索栏时，我遇到了关闭动画的两个问题：

(1) 当我点击 body 元素时，关闭动画正在重置，而关闭动画是运行。

(2) 即使搜索栏未展开，关闭动画也会运行。

我试图通过为不同状态（打开，true/false）的容器添加数据属性来解决这个问题，但不知何故它没有按预期工作。我的代码有没有逻辑错误？

(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 绑定。

这是您的 fork 支笔。

如何根据数据属性播放greensock timeline max

How to play greensock timeline max based on a data attribute

jquery

attributes

gsap