Блог

Главная - Вопросы по программированию - anime.js анимация не работает, (анимация не инициируется)

anime.js анимация не работает, (анимация не инициируется)

#javascript #css-animations #anime.js #web-animations

#javascript #css-анимации #anime.js #веб-анимация

Вопрос:

Я только начал с anime.js и написал этот базовый код, но он не работает.

   <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            var blue = anime({
                targets: '.blue',
                translateY: 200,
                autoplay: false
            });
    
            document.querySelector('.play-blue').onclick = blue.restart;
    
        </script>
        <style>
            .square {
                pointer-events: none;
                position: relative;
                width: 50px;
                height: 50px;
                background-color: cornflowerblue;
                margin: 4px;
                display: inline-block;
            }
    
            .blue {
                background: blue;
            }
    
            .controls {
                margin-top: 250px;
            }
        </style>
        <div id="anime-demo">
            <div class="square blue"></div>
    
        </div>
        <div class="controls">
            <button class="play-blue">Animate Blue</button>
    </body>
    
    </html>

Я установил anime через npm, и когда это не сработало, также включил cdn (строка № 6)
Кто-нибудь может сказать, где я ошибаюсь ..?

Ответ №1:

Ваш элемент не существует при выполнении документа.Оператор querySelector

Перенесите свой код в прослушиватель событий загрузки

И я также предлагаю вам использовать addEventListener на кнопке

 window.addEventListener("load", function() {
  var blue = anime({
    targets: '.blue',
    translateY: 200,
    autoplay: false
  });
  document.querySelector('.play-blue').addEventListener("click", blue.restart);
});  
 .square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.controls {
  margin-top: 250px;
}  
 <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
</div>

Когда вам нужно больше элементов управления, вы можете делегировать:

 window.addEventListener("load", function() {
  document.querySelector('.controls').addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName ==="BUTTON") {
      ....
    }
  });
});

Вот более общая версия, которую вы можете изучить

 const parms = {
  "blue": {
    targets: '.blue',
    translateY: 200,
    autoplay: false
  },
  "red": {
    targets: '.red',
    translateY: 400,
    autoplay: false
  }
}
const running = {}
window.addEventListener("load", function() {
  Object.keys(parms).forEach(key => {
    running[key] = anime(parms[key]); // save the object
    const but = document.querySelector('.play-'   key);
    but.dataset.running = key;
    but.addEventListener("click", function() {
      running[this.dataset.running].restart()
    });
  })
});  
 .square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.controls {
  margin-top: 250px;
}  
 <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>
  <div class="square red"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
  <button class="play-red">Animate Red</button>
</div>

Комментарии:

1. Фрагмент кода запускается, но когда я копирую и вставляю его в свой редактор (VS code), этого не происходит. codeshare.io/amQgl4 Пожалуйста, проверьте это

2. Извините, синяя переменная также должна быть внутри загрузки — см. Обновление