動畫功能不起作用

我正在創建一個簡單的動畫橫幅類型的東西，只是顯示一些字符串和圖像。我有它的工作，然後我改變了一些變量名稱，似乎無法找到爲什麼它不工作。動畫功能不起作用

<!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>

來源

2017-06-01 Steven Yanak

您可以創建一個小提琴看what's去錯了嗎？ – Gerardo

對不起，我是新手。你能解釋一下這是什麼嗎？ –

轉到[https://jsfiddle.net/](https://jsfiddle.net/），然後粘貼你的代碼，我們可以有一個想法，你是什麼triyng更清晰 – Gerardo

你缺少一個逗號;）看到：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");

來源

2017-06-02 03:42:25

動畫功能不起作用

回答

相關問題