GreenSock动效库TweenMax简单使用代码片段

杨俊茂
2023-12-01
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<script type="text/javascript">

    //demo 1----------------------------------------
    TweenMax.to("CSSselectors", 1, {
        opacity: 0,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: function () {
            //一些动画结束后要触发的动作
            /*document.querySelector("CSSselectors").style.*/
        }
    });

    //demo 2----------------------------------------
    TweenLite.to(DOM元素, 1, {
        opacity: 0,
        scale: 1.2,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: completeHandler,
        onCompleteParams: ["传参"]
    });

    //demo 3----------------------------------------
    let tl = new TimelineMax({repeat: 0, repeatDelay: 0});
    tl.to(".green", 1, {x: 200})
        .to(".orange", 1, {x: 200, scale: 0.2}, "+=1").addLabel("greyAndPink")
        .to(".grey", 1, {x: 200, scale: 2, y: 20}, "greyAndPink")
        .to(".pink", 1, {x: 200, rotation: 360}, "greyAndPink");

</script>

 类似资料: