如何在预建内容滑块中重复使用 tweenmax 补间？

Question

我有一个影响元素多张幻灯片的补间。目前，当滑块初始化时，我每次都只是播放补间动画，但它会影响每张幻灯片中具有目标 class 的元素，而不仅仅是当前幻灯片，有时您会看到隐藏的元素出现补间正在发生。

有没有办法使用 tweenmax 设置补间，以便它可以在具有相同 class 但不能同时运行的元素上重复使用？

代码：

<div id="slider-wrapper">
    <ul class="slides">
        <li style="background: url(http://lorempixel.com/400/200/nature/1) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
        <li style="background: url(http://lorempixel.com/400/200/nature/3) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
    </ul>
    <div class="slide-direction">
        <div class="prev-slide"></div>
        <div class="next-slide"></div>
    </div>
</div>
<script>
    $(document).ready(function() {

        var dropIn = TweenMax.from(".slides .slide-text", 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)});
        $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450, // Transition speed. This must give the tween on the .slide-text enough time to complete the reversal out
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-initialized', function(currSlide){
            // when the slider is fully loaded
            dropIn.play();
        }).on('cycle-after', function(currSlide){
            // when the slide transition is completed
            dropIn.play();
        }).on('cycle-before', function(currSlide){
            // just before the transition is started
            dropIn.reverse();
        });

    });
</script>

See the fiddle here

Answer 1

我找到了解决办法。由于无法重新使用由变量设置的 tweenmax tween（我能找到......），这就是我最终做的：

        // Set the initialized state before the slider is initialized
        $(document).on('cycle-initialized', ".slides", function(){
            // when the slider is fully loaded
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        })

        var homeSlider = $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450,
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            autoHeight: 1,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-after', function(){
            // when the slide transition is completed
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        }).on('cycle-before', function(){
            // just before the transition is started
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}
            );
        });

Updated Fiddle

如何在预建内容滑块中重复使用 tweenmax 补间？

How can I re-use a tweenmax tween in a pre-built content slider?

jquery

gsap

cycle2