なぜこの基本的なanime.jsは機能しませんか？

私はAnime.JSを学び始めています。どのように動作するかを確認するために、documentation websiteの非常に基本的なサンプルコードをいくつかコピーしました。なぜこの基本的なanime.jsは機能しませんか？

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="anime.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div id="cssSelector"> 
     <div class="line"> 
     <div class="square el"></div> 
     </div> 
    </div> 
</body> 

</html>

CSS：

body{ 
    background-color: #232323; 
} 

.square{ 
    width: 100px; 
    height: 100px; 
    background-color: red; 
}

とJavaScript

var cssSelector = anime({ 
    targets: '#cssSelector .el', 
    translateX: 250 
});

I変なふうに、正方形は...右250ピクセル、それがあるべきように

HTMLをアニメーション化されていません正方形を参照してくださいが、アニメーションはありません。プログラムは、コンソールにエラーメッセージがないため、はanime.min.jsを読み込みます。

出典

2017-08-17 Ethernetz

それは私に動作します：https://jsfiddle.net/DerekL/980j4591/あなたはそれがロードされていますか？また、ページがロードされた後にコードを実行するようにしてください。 –

私が信じることは、ページが読み込まれる前にコードを実行しようとしていることです。そして、それが動作するはず

function main(){ 
    anime({ 
     targets: '#cssSelector .el', 
     translateX: 250 
    }); 
} 

document.addEventListener("DOMContentLoaded", main);

：

はこれを追加https://jsfiddle.net/DerekL/980j4591/

出典

2017-08-18 00:00:19

なぜこの基本的なanime.jsは機能しませんか？

答えて

関連する問題