javascript - 反转后清除 GSAP TimelineMax 动画

Question

基本上我有这样的结构，我的目标是为 4 个 div 设置动画，这样当您点击一个时，另一个会滑出，当您点击容器时，它们会返回到初始位置。

var TL = new TimelineMax;
$('.quater').on('click', function () {
    $faders = $('.container').find('.quater').not(this),
    $faders.each(function () {
        TL.to($(this), 1, {autoAlpha:0, x:50}, 0);
    });
});

$('.container').on('click', function () {
    TL.reverse();
    TL.clear();
});

问题是如果我省略“TL.clear();”如果我输入“TL.clear();”，它将仅对单击的第一个“.quater”div 起作用。动画将不再反转。

Answer 1

jsFiddle .

片段:

var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var duration = 0.6;
var ease = Expo.easeOut;
var numItems = items.length;
var i;

container.addEventListener('click', onContainerClicked, false);

for (i = 0; i < numItems; i += 1) {
    (function(index){
        items[index].timeline = new TimelineMax({ paused: true });
        items[index].timeline.fromTo(items[index], duration, { y: 0, autoAlpha: 0.4 }, { y: -104, autoAlpha: 1, ease: ease });
        items[index].addEventListener('click', onItemClicked, false);
    }(i));
}

function onContainerClicked() { reverseAll(); }

function onItemClicked(e) {
    reverseAll();
    e.target.timeline.play();
}

function reverseAll() {
    for (i = 0; i < numItems; i += 1) { items[i].timeline.reverse(); }
}

html, body {
    margin: 0;
    padding: 0;
}

.container {
    background: #444;
    width: 512px;
    height: 104px;
}

.item {
    float: left;
    margin: 2px 0 0 2px;
    width: 100px;
    height: 100px;
}

.item:nth-child(odd) { background: #0cc; }
.item:nth-child(even) { background: #cc0; }

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="container"></div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>