使用GSAP动画SVG元素(Animating SVG elements with GSAP)

 我的任务是创建一个交互式SVG信息图，其中包含几张用于浏览器游戏的幻灯片，它共有5个步骤。 当您单击上一个/下一个按钮或特定步骤时，整个svg应该将自己设置为正确的步骤。 
 
 在代码方面，这就是我所拥有的： 
 
function Slide() {

    // Cache all top-level svg elements for later use
    this.el = $('svg#betfair-slider');
    this.hands = this.el.find('#hands_8_');
    this.cardsDesk = this.el.find('g#center-cards');
    this.textContainer = $('.step-text');

    // Use a shared timeline across all slides, so there are no overlapping tweens
    this.tween = new TimelineLite();
}

function Slide2 () {

    // Inherit from the main slide
    Slide.call(this);

    // each slide has its own supporting explanatory text
    this.html = [
        '<h3>Preflop</h3>',
        '<p>Amet sit lorem ipsum dolar</p>'
    ].join('');

    // the main openslide method
    this.openSlide = function() {
        // find the cards that need to be animated for this specific slide
        var cards = this.hands.find('.card');
        // fade out each card
        this.tween.staggerTo(cards, 0.2, { opacity: 0 }, 0.2);
        // Render supporting text
        this.textContainer.html(this.html);
    };

}
 
 以下是我想要获得的卡片：  
 
 我可以使用this.hands.find('.card');获取它们this.hands.find('.card'); jquery方法（我可以在控制台中看到它们），但我无法为它们设置动画。 我尝试动画不同的属性（不透明度，x，y，左等），但没有任何反应 - 屏幕上没有任何动作。 
 
 我能够执行this.hands.find('.card').hide()并使用jQuery更改css，但为什么TimelineLite在这里不起作用？ 我也试过这种方法： 
 
var cards = this.hands.find('.card');
for (var i = cards.length - 1; i >= 0; i -= 1) {
    var card = cards[i];
    this.tween.to(card, 0.2, { opacity: 0 });
}
 
 但仍然没有成功......有趣的是，当我在补间上附加onComplete回调时，他们被解雇了，但屏幕上绝对没有任何动作。 你可以看看这里的一切。 
 
 感谢您提前获得的帮助，欢迎任何建议。 

I am tasked with creating an interactive SVG infographic with few slides for a browser game, it has 5 steps total. When you click prev / next buttons or a specific step, the whole svg should animate itself to the correct step.
 
In terms of code, this is what I have:
 
function Slide() {

    // Cache all top-level svg elements for later use
    this.el = $('svg#betfair-slider');
    this.hands = this.el.find('#hands_8_');
    this.cardsDesk = this.el.find('g#center-cards');
    this.textContainer = $('.step-text');

    // Use a shared timeline across all slides, so there are no overlapping tweens
    this.tween = new TimelineLite();
}

function Slide2 () {

    // Inherit from the main slide
    Slide.call(this);

    // each slide has its own supporting explanatory text
    this.html = [
        '<h3>Preflop</h3>',
        '<p>Amet sit lorem ipsum dolar</p>'
    ].join('');

    // the main openslide method
    this.openSlide = function() {
        // find the cards that need to be animated for this specific slide
        var cards = this.hands.find('.card');
        // fade out each card
        this.tween.staggerTo(cards, 0.2, { opacity: 0 }, 0.2);
        // Render supporting text
        this.textContainer.html(this.html);
    };

}
 
Here are the cards I am trying to get: 
 
I am able to fetch them using the this.hands.find('.card'); jquery method (I can see them in the console), but I just can't animate them. I have tried animating different attributes (opacity, x, y, left, etc), but nothing happens - nothing moves on the screen.
 
I am able to do this.hands.find('.card').hide() and change the css using jQuery, but why TimelineLite doesn't work here? I also tried this approach:
 
var cards = this.hands.find('.card');
for (var i = cards.length - 1; i >= 0; i -= 1) {
    var card = cards[i];
    this.tween.to(card, 0.2, { opacity: 0 });
}
 
But still no success... The interesting thing is that when I attach an onComplete callback on the tweens, THEY ARE fired, but absolutely nothing moves on the screen. You can check out everything here.
 
Thanks for the help in advance, any suggestions are more then welcome.

原文：https://stackoverflow.com/questions/36835802