Question

我正在创建一个简单的动画横幅类型的东西，只显示一些字符串和图像。我有它工作然后我改变了一些变量名称，似乎无法找到它为什么不工作。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Animate</title>
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 200%;

        }
        #container {
            width: 700px;
            height: 400px;
            background-color: black;
            margin: 40px auto;
            position: relative;
            overflow: hidden;
            opacity: 0;
        }
        .quote {
            font-size: 3em;
            font-weight: bold;
            position: absolute;
            width: 600px;
            text-align: center;
            top: 60px;
            left: 0px;
            color: crimson;
            text-shadow: 3px 3px 8px rgba(0,0,0,0.5);           
        }
        #img {
            top: 60px;
        }
        img {
            position: relative;
            width:620px;
            bottom: 100px;
        }
    </style>

</head>

<body>

    <div id="container">
        <div class="quote" id="quote1">Thirsty?</div>
        <div class="quote" id="quote2">Love beer?</div>
        <div class="quote" id="quote3">Well look no further!</div>
        <div class="quote" id="quote4">Come on down to...</div>
        <div class="quote" id="quote5">Steve's Bar!</div>
        <div class="quote" id="img"><img src="img/stevebar.jpg" alt="steve bar"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
    <script>

    var idContainer = document.getElementById("container");
    var idQuote1 = document.getElementById("quote1");
    var idQuote2 = document.getElementById("quote2");
    var idQuote3 = document.getElementById("quote3");
    var idQuote4 = document.getElementById("quote4");
    var idQuote5 = document.getElementById("quote5");
    var idImg  = document.getElementById("img");

    var tl1 = new TimelineLite();   

    tl1.to(idContainer,1,{opacity:1})
       .from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
       .to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
       .from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
       .to(idQuote2 1, {delay: 1, x: 1000, ease:Back.easeIn })
       .from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
       .to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
       .from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
       .to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
       .from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
       .to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
       .from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");


    </script>
</body>
</html>

Answer 1

您错过了逗号;）请参阅：https://jsfiddle.net/0Le94gsL/

tl1.to(idContainer,1,{opacity:1})
  .from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
  .to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
  .from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
  .to(idQuote2, 1, {delay: 1, x: 1000, ease:Back.easeIn }) // You needed a comma here just after idQuote2
  .from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
  .to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
  .from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
  .to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
  .from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
  .to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
  .from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");

动画功能不起作用

1 个答案: