反转后清除 GSAP TimelineMax 动画答案

【问题标题】：Clear a GSAP TimelineMax animation after reversing it反转后清除 GSAP TimelineMax 动画
【发布时间】：2014-10-11 12:46:49
【问题描述】：

基本上我有一个这样的结构，我的目标是为 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动画将不再反转。

【问题讨论】：

有我们的演示吗？使用 if 语句在两者之间切换可能会更好
这是一个很好的建议，我只需从这里使用自定义 JQuery 切换功能将其切换为两个单独的动画：stackoverflow.com/questions/17583215/… 应用于容器，它就像一个魅力！谢谢！

标签： javascript jquery css gsap

【解决方案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>

【讨论】：