Q&A
anime.jsを使ってみようと思い、テンプレート的なものを動かしてみようと思ったのですが、アニメーションが施されるオブジェクトが表示されません。
色々と試してはいるのですがうまくいきません。どなたかご教授いただけると幸いです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>anime.js</title> 7 <link rel="stylesheet" href="style.css" /> 8 <script src="anime.min.js"></script> 9 </head> 10 11 <body> 12 <div id="box"></div> 13 <div id="playPause"> 14 <div class="line"> 15 <div class="square shadow"></div> 16 <div class="square el"></div> 17 </div> 18 <div class="line"> 19 <div class="square shadow"></div> 20 <div class="square el"></div> 21 </div> 22 <div class="line"> 23 <div class="square shadow"></div> 24 <div class="square el"></div> 25 </div> 26 <div class="line player"> 27 <button class="play">Play</button> 28 <button class="pause">Pause</button> 29 </div> 30 </div> 31 <script src="main.js"></script> 32 </body> 33</html>
css
1#box { 2 width: 100px; 3 height: 100px; 4 background: #000; 5} 6 7.shadow { 8 position: absolute; 9 opacity: 0.2; 10} 11 12.square { 13 pointer-events: none; 14 width: 28px; 15 height: 28px; 16 margin: 1px; 17 font-size: 12px; 18} 19 20.player { 21 opacity: 0.4; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 padding-top: 20px; 26 padding-bottom: 10px; 27} 28 29.player button { 30 position: relative; 31 display: block; 32 margin: 0 0 0 -1px; 33 padding: 5px 10px; 34 font-size: 12px; 35 text-transform: uppercase; 36 border: 1px solid #000; 37 background-color: transparent; 38 color: #000; 39}
javascript
1anime({ 2 targets: "#box", 3 duration: 2000, 4 translateX: 300, 5}); 6let playPause = anime({ 7 targets: '#playPause .el', 8 translateX: 250, 9 delay: function(el, i, l) { return i * 100; }, 10 direction: 'alternate', 11 loop: true, 12 autoplay: false 13 }); 14 15 document.querySelector('#playPause .play').onclick = playPause.play; 16 document.querySelector('#playPause .pause').onclick = playPause.pause;
回答1件
0
ベストアンサー
手元で動かしてみましたが、.el や .shadow が背景と同じ色で見分けがつかないだけのようです。style.css に適当に
.el { background: red; } .shadow { background: yellow; }
などと追加すれば見えるようになりました。
投稿2020/12/14 04:44
総合スコア210
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。